I am trying to achieve the effect which can be seen here in the lower right where the artist name and track title fade out to the right.
My first attempt was creating an overlay image, but this resulted in an ugly edge on the right because the colors would add. (maybe I can substract the images before using them?)
(this is how it looks like)
Then I searched for a CSS 3 attribute which is crossbrowser compatible. But I didn't even found a solution that works with all modern browsers.
EDIT: I am not searching for an animation. I want to have a gradient.
This seems to be very difficult to explain. I made a fiddle of how far I got: http://jsfiddle.net/z7cK2/
ANSWER: OUCH, nevermind...
is seemed I just used an old image m(
What kind of image did you try to overlay?
Method 1 (Image):
http://jsfiddle.net/R3ndb/2/
Use an absolute positioned image as an overlay.
Method 2 (CSS3 gradient):
http://jsfiddle.net/R3ndb/3/
Use an overlayed DIV with a CSS3 gradient.
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.
I have been trying to make this PSD using CSS?
So far I have reached this. Can I achieve this design using CSS3 or do I have to use old school background image method?
In short, yes this is possible with CSS alone (without CSS2 even), but I would urge you to use background images instead.
Ranting
The problem with doing CSS like this is shadows. The way it renders the triangle is just a border that is transparent on the diagonal sides. In other words, your shadow would still be a box and would not look the way you want it to.
I see this a lot with people starting to use CSS3. They normally want everything done dynamically instead of with background images. And once it's done, there's this slew of CSS that barely does anything aesthetically for the page. In reality, it only takes 10-15% of what they end up with to achieve the same effect with images.
There isn't any problem with background images, they aren't going out of style, and they certainly won't stop working any time soon. My advice, stick with background images for what needs an image, and save CSS3 for special effects. It sounds boring and old-school, but it works and is a whole lot easier.
This seems like a relatively simple CSS project; simple, here, being relative, as I've seen people make an animated Twitter Fail Whale with CSS alone.
What you're going to have to do for the triangle edges (which I assume is the tricky part for you), is use the CSS matrix transform (elaborated on at W3Schools), and then just use box-shadow for the borders, and box-shadow: inset for the inset effect. Afterwards, just use appropriate padding and text alignment to get the text centred in each part of the object.
EDIT
Consider using the before and after pseudo elements to achieve this. Alternatively, you can use two skewed <div>s stacked on top of eachother for each section; however, this wouldn't give you an attractive shadow.
I don't think it is possible with CSS alone. You will have to make use of background image. You will be able to create the tapered edge effect using :after and :before psuedo classes. But will face problem with the inside shadow.
I once tried to create a similar breadcrumb using css3 alone when I saw the breadcrumb in Google Help Center (which is similar, but using background image), but was not able to do it.
http://support.google.com/adsense/bin/answer.py?hl=en&answer=1354760
I tried to do it with CSS (:after and :before) pseudo elements, without adding any other html elements.
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.
Hi I was trying to figure out how to create a border that fades into the background colour of a div and this is the only solution I could come up with.
I've googled around and it seems people suggest CSS3 but I was told it was still "under development" and not fully introduced in modern browsers, correct me if I'm wrong, probably am.
Anyway this is the solution I came up with, are there simpler ways of doing it or is this a reasonable approach?
Created numerous divs for each part of the border (as below), and set their background image according to the part of the border: http://i.imgur.com/sh6Z8.png
HTML & CSS: http://codeviewer.org/view/code:1e4f
(New to webdevelopment and stack overflow, sorry if I'm doing anything unorthodox, thanks).
So as Tim there already said it, if the width of your website is static, you can do something like that ( In fact even if css3 may be good option for your usage case This is super simple... )
http://jsfiddle.net/Xtw84/3/ - this is from a prior answer so the edges are not soft but the idea is the same. ( doesnt matter ) I also added image in the background so you can see how that would work. Theres no need.. actually makes no sense to slice the background image in half.
Heres a bit more stripped down version of it. http://jsfiddle.net/Xtw84/4/
With css3 i would do this with box-shadow and just expand the shadow as much as needed.
Is your layout going to be fluid? e.g. it will grow in width/height? If it isnt going to grow in width, then there is no reason that you can not just set the background image.
For what you are doing, I wouldn't use gradient borders and just stick with the images in the background.
I have a Div named splash which is 473px wide and 139px high. It has a background image applied to it. Within the Div I have 3 other Divs.
I want the background image of the splash container div to fade in and out through different pictures.
Is there any way to achieve this using CSS3?
You can see the splash div on http://blackburnseo.com/ensor/
CSS3 has a property/feature called 'transitions' which may be able to achieve the affect you're looking for, sans JS.
After a quick google, I believe this may be a good spot to get you started.
http://css3.bradshawenterprises.com/transitions/
I don't know how many browsers have implemented this feature, though; the other problem is that not every property supports transitions (you would probably be looking at background-position)
It can be done using transitions, but it wont change automatically.
User must trigger transition somehow (:hover, :focus, etc).
Check the example here: http://jsfiddle.net/seler/zZCyf/