just started to get my head around the clip property in CSS.
I am working on a website for a biscuit factory and I want to make it responsive. My problem is that I came across a section from the site where I can't just use the good old png background because of responsive problems.
So, my question is, how do you manage to get this pattern (clipping, maybe) going on in CSS and not by using png transparency.
.home .section-4 {
background-image:url('../images/backgrounds/tales.png');
background-size:cover;
}
I've tried using pseudo elements, but without luck.
If you simply use radial-gradient (from transparent to whatever color is your background) in a pseudo element you can achieve a solid result.
.wave{
height: 60px;
position: relative;
background-image:url('http://placehold.it/350x60');
}
.wave::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image:
radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
}
<div class='wave'></div>
Related
Is it possible to blend the iterations of a single background-image when background-repeat is set to repeat like so:
Solutions using javascript are also welcome.
Thanks in advance
You would need 2 images for this.
one that tiles seamlessly
and the starting top image which doesn't tile.
Your element will use the tileable one as its background. The background position Y should be the height of the non-tileable one.
You can then add a pseudo element ::before on top of your element positioned to the top which has the background of your non-tileable image.
div
{
position: relative;
width: 813px;
height: 2000px;
border: 3px solid red;
background-image: url(https://i.imgur.com/joeNpq8.png);
background-repeat: repeat-y;
background-position: 0 682px;
}
div::before
{
content: '';
width: 813px;
height: 682px;
background-image: url(https://i.imgur.com/iYgZFsw.png);
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
}
<div></div>
So at the moment, I've got a div behind a link, I've set the div background to be a specific image, and I'd like the same image to appear when hovering over that div but a shadow appears around the inside of the box, I have both images with me, but I can't seem to find a way to keep the "Home" background image the same as the "Home:hover" background image but with the shadow box too, I'd like to do this without having to individually place the shadow onto the background image in photoshop.. any thoughts?
Here's the CSS:
#Home {
z-index: 4;
position: absolute;
top: 0px;
left: 707px;
width: 95px;
height: 64px;
margin: 0;
background: url(../images/button%20texture%20b.jpg) center;
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
}
#Home:hover {
width:95px;
background: url(../images/button%20overlay%20b.png) ;
background-size: cover;
}
.
#Home:hover {
width: 95px;
background: url(../images/button%20overlay%20b.png) center, url(../images/button%20texture%20b.jpg) ;
background-size: cover;
}
Thanks!
I would recommend using this code:
#Home:hover { background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left; }
As you can read here, you can actually assign multiple background images to an element. The first image stated will be on top, the second below the first image and so on.
http://html5up.net/big-picture
The overlay.png does make my background brighter. But I do not want to deleted it unless I understand what this png does. Do you guys have a clue?
The overlay.png is used here:
#intro {
background: url('images/overlay.png'), url('../images/intro.jpg');
background-size: 256px 256px cover;
background-attachment: fixed, fixed;
background-position: top left, top center;
background-repeat: repeat, no-repeat;
color: #c2b090;
}
.image:before
{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url('images/overlay.png');
}
It's making your background image lighter. overlay.png is a partially transparent blue-ish graphic that overlays intro.jpg. It's set as the first background image of your main section tags. If you delete it, your big images will not be washed out, but it will result in a failed HTTP request because your CSS is still referencing it. If you want to delete the image, you should remove reference to it in your style.css file if you can.
Im looking for a way to recreate this button with CSS only.
I know about the triangle technique and I also know how to add a border to it, but unfortunately I don't know any way to recreate this button (without adding additional wrappers or using images).
The buttons I need this style on are <input["submit"]> and ordinary <a>'s.
With one element, you could do it using gradients and skewed pseudo-elements for a link:
demo
(you could actually do it using just gradients, but then a hover action won't be triggered on hover on the arrow shape itself, but on hover on the rectangular element containing it)
HTML:
<a class='boo' href='#'>click me</a>
Relevant CSS:
.boo {
display: inline-block;
position: relative;
padding: .5em 2em;
background:
linear-gradient(60deg, dodgerblue 50%, transparent 50%) 100% 0,
linear-gradient(-60deg, transparent 50%, dodgerblue 50%) 100% 100%,
linear-gradient(-90deg, transparent 1em, dodgerblue 1em);
background-repeat: no-repeat;
background-size: 1em 50%, 1em 50%, 100% 100%;
}
.boo:before, .boo:after {
position: absolute;
right: -.2em;
width: .5em; height: 50%;
background: dodgerblue;
content: '';
}
.boo:before {
top: 0;
transform: skewX(30deg);
}
.boo:after {
bottom: 0;
transform: skewX(-30deg);
}
EDIT:
If your background is a solid color, not an image or a gradient, you could do it in a much simpler way, without using gradients (which means that this second method also has the advantage of working in IE9).
demo #2
.boo {
display: inline-block;
position: relative;
padding: .5em 2em;
background: lightblue;
}
.boo:before, .boo:after {
position: absolute;
right: -.3em;
width: .5em; height: 50%;
box-shadow: -.2em 0 0 white;
background: inherit;
content: '';
}
.boo:before {
top: 0;
transform: skewX(30deg);
}
.boo:after {
bottom: 0;
transform: skewX(-30deg);
}
You should use a background image. Create a transparent png containing the arrow.
You would need two elements, the outer would contain the background image, the inner would contain the text, and a background color which is the same as the one on the arrow. Alternatively, you could use a second background image instead of a background color, for example if your button is not just a flat color.
The trick is to align the box containing the text with the background image.
If your arrow is 20px tall, your inner box could be e.g. 16px plus 2px padding on each side (search for box model if you would like to understand this better).
The outer element can have a right-margin set to the approximate width of the arrow image.
I hope this makes sense. The general technique is called sliding doors. I suggest reading the entire article if you have the time.
I have a table that gets sorted. The headers have background images (arrows) to show the sorting direction.
The current CSS uses 3 different images like this:
th {
padding-right: 21px;
}
th.sorting {
background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting_asc {
background: #ECE0EB url("table-sort-asc.png") no-repeat center right;
}
th.sorting_desc {
background: #ECE0EB url("table-sort-desc.png") no-repeat center right;
}
Working example in the JSfiddle here.
Is there a way to reduce these to one image and use CSS sprites? The problem is that a merged image cannot simply be used as a background to the header cell, because multiple images may become visible at once, like here.
I'd like to avoid using extra elements if possible. IE7 support would be great but I could probably live without it.
Pseudo elements like :after could work, but I can't find a way to position the icons in the same way. JSfiddle example.
I figured out a way for pseudo elements to work. Set the table headers as position: relative, then something like this:
.sorting:before {
display: block;
content: "";
position: absolute;
top: 50%;
right: 8px;
width: 7px;
height: 9px;
margin-top:-4px;
background: transparent url("http://i.imgur.com/iONZm.png") 0 0;
}
The icon is positioned 50% from the top, then moved upward a few pixels to be vertically centered.
You can use SpriteMe to generate sprite images on your site.
.sorting_asc {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px 0px;
}
.sorting {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px -27px;
}
.sorting_desc {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px -53px;
}
A quick Google search for a CSS sprite generator comes up with a few options. Though I've never used any of these services myself, I have usually made a single PNG image with transparency. Then you would reference your CSS like this:
th {
padding-right: 21px;
background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting {
background-position: -100px -100px;
}
th.sorting_asc {
background-position: -200px -200px;
}
th.sorting_desc {
background-position: -300px -300px;
}
Replace the background-position property values with the appropriate coordinates. I think the CSS sprite services can create these values for you based on their compression once it is done, but the CSS coordinates may need some tweaks to get it exactly how you want.