- This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
Viewing 8 posts - 1 through 8 (of 8 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Guys what do you think it is possible to achieve this only with css? Right now I’m using an image to achieve this. Basically I have a hr tag and I want to use this [effect](http://beyzabranding.com/coreFiles/wp-content/themes/beyza-branding/images/aston_martin/hr.png “effect”).
Right now my css for the styling is this piece of code:
hr {
background-image: url(“../images/aston_martin/hr.png”);
background-color: transparent;
height: 43px;
}
Any help it will be much appreciated.
You can do it with CSS only, but it will not be supported by all browsers. I’d recommand using a data:url encoded image in your stylesheet.
Hi Hugo, thank a lot, can you please point out some link about this, or can you give me some codepen codes? or something as an example?
The problem of your solution is that you do an extra HTTP request, which is as you may know, “bad” for performance. You have then 4 solutions to deal with your problem:
_ leave it as is; an extra HTTP request is no big deal even if it’s not optimized
_ include your image in a sprite with your other background images, and position it accordingly
_ [convert](http://dataurl.net/#dataurlmaker) your image into an encoded image in your CSS
_ use pure CSS to do so, making sure to provide a decent fallback for unsupported browsers
I really don’t want to use image, cause as you can see the oblique part is very bad quality, I don’t know why, I created the image in Photoshop, and that oblique line is just rotated with almost 45 degree or something. I was thinking in using pseudo elements, but I have failed to do so.
Hugo, after a close inspection and some reading, I will decide to use data:url encoded image in my css. It’s really amazing. So thank you so much for this. Have a great day. Cheers.
@Eduard: Pure CSS way: http://jsfiddle.net/LSqtm/.
Thank a lot you’re a STAR.