I'm struggling to fine out if its possible to control the direction of a fill transition with CSS.
I'm using an infinity loop inline SVG as an icon I would like to animate.
Basically I'd like the icon to change color when hovered over, but start a the bottom middle and follow the flow of the infinity loop.
Heres a GIF that is very similar to the effect I'd like to achieve.
https://d13yacurqjgara.cloudfront.net/users/117549/screenshots/1372400/loop.gif
Any help or advice appreciated!
If you are using SVG path, then one possible solution is to use stroke-dasharray and stroke-dashoffset.
Can you post a fiddle of what you have done until now?
Related
what is the name of this effect? Above the heading What is a sofbox? I mean the wave line, like
here.
It is also above the title Readymade Multi-use Landing Homepages here. I don't know what it's called, I can't find it.
How can I make this animated effect (from the second link) and responsive as it is on that page? Can anyone help? The ideal solution would be vuejs, if possible.
You do not necessarily need Vue.js or even js to achieve that. You can do it with just CSS.
In the first example, it seems to be simply an image (white wave) positioned :after the div with the background picture. It is on the top of the actual div, you can use z-index for that.
The second example is a bit funkier. It is SVG (white wave) that is animated to move to the left. So it could really be the same picture as from the first example but you would just add animation to move the element to the left infinitely.
Have a look here. I created pretty much the same effect with SVG.
Also, have a look here - you can customise your own wave easily.
Hope it helps.
Please have a look at the image. There is a black border in right side with text inside. How can I get this in css?
I would say use svg for this, use svg as background of container div, give content lot of margin top/left/right to make it fit.
Btw this design is most likely not gonna work on mobile so you have to figure out a decent alternative for that.
Here is a great website with weird CSS hard div: https://css-tricks.com/examples/ShapesOfCSS/
You'll see they did an egg, then you can modify the egg shape to try to get a similar shape like on the picture.
What you need to do is create a div with a class, then modify the div's shape and had a border on it.
I am working on a drop down menu that I want to make completely with CSS. Within the link I will not only have text that needs to change when hovered over, but also an image. Changing the color of the text is easy. However I am not sure how to swap the images on the hover...
Here is what I want the result to look like:
Where the arrows will be small images that will switch when the link is hovered over. How do I do this using CSS?
http://www.w3schools.com/css/css_image_sprites.asp
Check Image Sprites - Hover Effect section.
Set the image as a background image to a div (with a set width and height), and you can change that value with css.
Ideally put both graphics into one image, so that you can just shift the background position and you don't get any flicker during the transition (Google "css image sprites").
I believe you'd need to use javascript to change the src of an embedded image.
You could also have two images and use display:block and display:none to show/hide them as appropriate, but I don't think that would be the best approach.
Use CSS background: url()... on an element you deem most applicable. Here is documentation and a walkthrough: https://developer.mozilla.org/en-US/docs/Web/CSS/background.
On a side-note, you may want to consider using a sprite as well, https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites
I am wondering how to make an angled element that acts as an arrow, attached to a tooltip. I've seen this done by Google Accounts, and I have attached a screenshot. It appears they are achieving this with a couple of span elements.
I can't figure out from their HTML/CSS how they did it... My only idea is to use a CSS3 rotation on a regular div, or an image, but I'm guessing there's a more basic way.
Can anyone give me a hint? I'm not looking for a full solution, I'm just stumped about how to approach it. Also it's not about the tooltip itself, it's about that angled element.
EDIT: Here's a related question. They are using transparent borders, border-radius and box-shadows?
You can create it using image or manipulated span, I know facebook create it using sprite image, google and twitter using styled span, just make border transparent except the bottom one. this is twitter:
this is a tutorial.
What I want to achieve is located here: http://www.ppp-templates.de/tilability/ ..You see the left and right triangles near the slider, where the arrows are supposed to be...
right now I have that div set up here, with a white background http://teothemes.com/wp/. On that website a background image was used, but I want to do it via CSS
Something related is here, for the footer triangle: Make a CSS triangle with transparent background on a div with white bg image?
I tried to do the same thing, but it didn't work..
Any help is greatly appreciated.
The first thing you can do is create two squares with background same as the background of the website and then rotate them 45deg using transform: rotate(45deg) with vendor prefixes. Then just set the content div's overflow to hidden.
Something like this that I just created: http://cssdeck.com/labs/hggee4eg
Explaining the process here proved to be quite difficult, so I created a fiddle which goes through each of the steps needed to achieve this, each with a small legend.
Here's the fiddle - http://jsfiddle.net/NXmge/3/
EDIT
- I misunderstood the question. Here's the fiddle with the solution to the actual problem: http://jsfiddle.net/joplomacedo/UJyAY/
The previous fiddle still remains useful as it helps understand what I did with on the second fiddle. I'll also update my answer as soon as I can too directly include a general explanation of what I did.
Depending on what sort of cross-browser compatibility you are hopeing to achieve, there are a couple of different CSS3-type options that will allow you to rotate elements by 45 degrees.
However, the example you linked to just uses one large background image with the graphics already in-place: there's nothing achieve with CSS there at all apart from setting it as the container background.