How did they do the text graphic set on an angle in TheDailyBeast.com? Go to this link: https://www.thedailybeast.com/msnbc-host-lawrence-odonnell-accuses-cnn-of-helping-trump-spread-lies?ref=scroll
Notice just under the headline, a subquote is positioned on an angle? It's not a graphic. It's live text. How did they get the text to be on an angle like that without making a graphic? And is their site Java? CSS?
For issues like this, inspect the code on the page in question, this is a simple css rotation transform. When you inspect the HTML, you will find it's quite simple:
<div class="Rubric__content">‘WE DON’T BRING ON LIARS’</div>
Then have a look at the styles in the dev tools:
.Rubric__content {
transform: rotate(-3deg);
}
Related
I created simple circular progress bar with SVG, but I have some troubles with making progress bar starting from the top of the circle (clockwise), and not the right side as currently.
Here's the code:
http://www.webpackbin.com/4yxjPQgMb
I will really appreciate if you can provide some guidance on how can I fix this thing. Thank you.
// Edit:
I managed to do this via CSS, like this:
{
transform: rotateZ(-90deg);
transform-origin: center center;
}
But still looking how to do this via JS.
All non-path graphic shapes (like the <circle> you are using) have a defined "equivalent path". This is specified so that dash patterns behave consistently across all SVG renderers. In the case of a <circle> the equivalent path is defined to start at the 3 o'clock position and proceeds clockwise around the circle.
See: https://www.w3.org/TR/SVG/shapes.html#CircleElement
There is no way to alter that other than by rotating or otherwise transforming it. You can do that with CSS as you have done (doesn't currently work in all browsers) or with a transform attribute on the <circle>.
I have a black #000 page background on my web page.
Is there a way that I can change this with SVG to show a random effect of small #111 and #222 colored squares. I was told I could do this with SVG but I don't have any idea where to start. Even a really simple example would be a great help.
I'm looking for a solution for IE9+ browsers.
SVGs can be used as background images they same way that a PNG or JPG can. Create an SVG with any suitable editor - such as Inkscape - and include it the way you normally would.
background-image: url(../images/mybackground.svg);
I am trying to rotate a circle image using jquery rotate plugin. But, I observe that the circle image appears to be oscillating about it's center while rotating. Something like a linear movement.
In IE7, it's pretty much observable. In Chrome/Firefox, if you zoom a bit, this wobbling issue can be observed.
I tried to rotate the image using Raphael library too. But still, the circle was wobbling.
Then I rotated the image with a c# program to see if the problem is with the browsers' graphic engine. But even here this issue is observed. I even took various images to see if the circle was imperfect. But, all the images show this behavior.
Can this be happening because of anti aliasing? Or, is it just an optical illusion?
If not, then what else can be the reason?
I am using jqueryrotate plugin rotate method to do this. $('#circleimg').rotate(Position);
Check this jsFiddle. Btw, this is the kind of source code you can include yourself in your question to make answering it easier for others.
http://jsfiddle.net/KyJzQ/
I used this rotate plugin since you did not specify which one you used.
HTML
<img id="circleimg" src="http://i.imgur.com/KgUDClr.png">
<img id="circleimg2" src="http://i.imgur.com/sK4qP6z.png">
JAVASCRIPT
var rot = 0;
window.setInterval(function() {
$('#circleimg').rotate(rot);
$('#circleimg2').rotate(rot);
rot += 1;
},
5
);
I think the circle you've provided is not actually a perfect circle, hence the tiny "oscillations" you see.
I added another circle that I rendered myself. If you zoom in closely enough you will see jagged pixels moving around the edge of my circle, but I don't see any way around this since the jQuery plugin is not actually re-rendering the image. I don't see any of the "oscillating" you mention in my circle.
This issue is more about vector art than it is about programming. Get a nice vector graphics program and render the nicest circle you can. Even the one I made is not really that good. Or use HTML5 and canvas to draw dynamically, rather than moving a static image around.
I am looking of a good example for dynamic 3 columns layout like this one from Google Search. I have see, that if the layout fits to every browser resulution. That menas, there is never a scroller if the resulution is 800, 1024 or >1024 . What kind of solution, can I use to become such effect? I have see, that the center content is floating, but how is it possible to fit for every resolution and is there a minimum of the width of the center, because if the browser goes smaller and smaller, there is a point, where the scroller is coming.
It will be great if anyone can redirects me to an similar example, please! I am interested in centered design, not left oriented like Google!
There is one CSS feature..
Here it is Google HTML5 site, where included this feature... Just try to change width of browser and scrollbar will not appear.. because css file has styles like
#media only screen and (min-width: 641px) and (max-width: 800px) { /* styles */ }
i.e. for some resolution you have some other styles..
take a look they css
Have a look at the CSS float tutorial, which I refer to every time I want to do a multicolumn. http://css.maxdesign.com.au/floatutorial/
i want to acheive the effect on this page using SVG. As you can see it uses a series of PNG transparent overlays when the user mouses over a polygonal hotspot drawn on a product.
What i want to achieve is the same thing with SVG, but without messing about with creating a load of PNGs, so that when the user mouses over an area the transparent shape (with link on it) appears over the top. The SVG shape would be built from a set of coordinates exactly as a polygonal hotspot would on an image map.
So i guess my first question is, can this be done with plain old SVG or do i need to use something like Raphael to achieve this? Never seen this effect before with SVG so if anyone has an example like that would be very useful.
Thanks in advance.
There are several ways to get this effect with plain old SVG. Probably the simplest is to use CSS within the SVG. For example:
<style>
.overlay:hover
{
opacity: 0.5;
}
</style>
<svg>
<a xlink:href="http://www.wherever/you/want/to/link/to.com">
<path class="overlay" d="Coordinates of your shape..." />
</a>
</svg>
I've written about various other methods at:
http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
Yes it can be done with SVG only, with or without javascript.
One way to get the effect would be to overlay a white semi-transparent path on top of the image that you want to whiten. Another way would be to use an SVG filter to process the image directly, similar to what I've done here or here to recolor a PNG (view page source and feel free to reuse that in any way you like).
You'll want to make use of the 'pointer-events' property most likely. Here's an example showing how to detect mouse-events on the fill and/or stroke of an svg shape, even if the shape is invisible.