What I want to do is use only 1 image url in the CSS.
So I would only need to change 1 url in the CSS, instead of all of them if I change an image or something.
The code is already using an image sprite.
I just want it to use 1 image url in it, instead of 6.
How would this be done?
This is where all the image urls, and background positions are located:
https://jsfiddle.net/g6oaht8f/286/
.jacketc {
position: relative;
width: 606px;
height: 344px;
cursor: pointer;
margin: 45px 0 0 0;
border-radius: 25px;
border: 3px solid #0059dd;
box-sizing: border-box;
background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -600px -862px;
}
.jacketd,
.wraph {
background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat 0 0;
}
.wraph {
position: relative;
width: 606px;
height: 606px;
margin: 45px 0 0 0;
overflow: hidden;
border-radius: 25px;
background-position: 0 -600px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrapb,
.wrapb::before {
background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -600px 0;
}
.wrapb::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
width: 266px;
height: 266px;
background-position: -600px -260px;
opacity: 0;
border: 3px solid #0059dd;
box-sizing: border-box;
transition: all 2s;
}
.wrapd .img {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 180px;
height: 180px;
background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -860px -340px;
}
.jacketb,
.wrape {
background: url("https://i.imgur.com/Y0CrMX2.png") no-repeat -600px -520px;
}
.wrape {
position: relative;
width: 266px;
height: 174px;
overflow: hidden;
margin: 45px 0 0 0;
border-radius: 25px;
background-position: -600px -687px;
}
.wrapf {
position: relative;
width: 266px;
height: 251px;
cursor: pointer;
margin: 45px 0 0 0;
border-radius: 25px;
background: #000000 url("https://i.imgur.com/Y0CrMX2.png") -866px -616px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
See the CSS in this fiddle: https://jsfiddle.net/ksp4qoej/
Note the most relevant change:
.jacketb,
.jacketc,
.jacketd,
.wrapb,
.wrapb::before,
.wrapd .img
.wrape,
.wraph,
.wrapf {
background-image: url("https://i.imgur.com/Y0CrMX2.png");
background-repeat: no-repeat;
}
What we're doing here is applying the image as a background to multiple classes of elements with a single rule. The background-position value needs to be updated on a more granular basis, which is done in individual selector blocks elsewhere in the file.
When you're ready, using something like SASS or LESS to generate your CSS can provide cleaner code for image maps. Check it out! http://thesassway.com/intermediate/spriting-with-sass-and-compass
David M's solution is correct. The only issue that I can see with it is a missing comma after .wrapd .img (see below)
.jacketb,
.jacketc,
.jacketd,
.wrapb,
.wrapb::before,
.wrapd .img,
.wrape,
.wraph,
.wrapf {
background-image: url("https://i.imgur.com/Y0CrMX2.png");
background-repeat: no-repeat;
}
Related
As I'm not expert in CSS, requesting help everyone. am trying to create speech bubble like below. but i could only able to get oval shape. I don't know how add tail on top right corner.
I've gone through all SO solution but don't know which CSS property need to change to make top right tail as per below image.
html
<div class="bubble-wrapper">
<div class="flat-oval"></div>
</div>
CSS
.flat-oval {
border: 1px solid green;
width: 160px;
height: 80px;
background-color: green;
border-radius: 50%;
position: relative;
left: 0%
}
.bubble-wrapper{
border: 1px solid red;
text-align: center;
}
that tail should be bit long and lean.
Thanks to all
do it like below:
.speech {
width: 200px;
height: 100px;
border-radius: 100%;
background: red;
margin: 50px;
position: relative;
filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000)
}
.speech:before {
content: "";
position: absolute;
top: -15%;
left: -10%;
border-radius: 100px 100px 0 0;
width: 60px;
height: 30px;
box-shadow: 20px 0 0 red;
}
<div class="speech"></div>
Well, you can use clip-path property in case of creating that tail thing. Using clip-path you can create any kind of shape you want. Here is some link that might help to learn more about clip-path.
similar kind of project: https://freefrontend.com/css-speech-bubbles/
clip-path documentary: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
I hope Its useful to you..
.bubble-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-70%, -50%);
width: 80vmin;
height: 80vmin;
}
.bubble-wrapper div {
position: absolute;
box-sizing: border-box;
}
.b {
border: 0.5vmin solid black;
}
.r {
border-radius: 100%;
}
.hb::before,
.ha::after {
content: "";
display: block;
position: absolute;
}
.bubble {
width: 40%;
height: 25%;
left: 73%;
top: 10%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 5vmin;
background: #ffd;
box-shadow: 0 -0.25vmin, 0 0.125vmin;
font-family: "Comic Sans", "Comic Neue", sans-serif;
}
.bubble::before {
width: 40%;
height: 250px;
bottom: -10px;
border-radius: 50%;
left: -60px;
box-shadow: 0.5vmin 0, 3vmin -1vmin #ffd, 3vmin -1vmin 0 0.5vmin;
clip-path: polygon(0% 49%, 150% 51%, 150% 100%, 0% 100%);
transform: rotateZ(-210deg) scaleX(-1);
}
<div class="bubble-wrapper">
<div class="bubble b r hb">Hello....</div>
</div>
I'm trying to recreate the following image in CSS:
I've already started making the box and arrow (see below) and now my only problem is to make the left edge of the arrow round with CSS only just like in the image.
Any idea? Thanks.
.speech-bubble {
position: relative;
background: #ff0d1e;
display: inline-block;
width: 239px;
height: 95px;
margin: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
content: "";
position: absolute;
top: 25px;
left: -32px;
width: 0;
height: 0;
border-style: inset;
border-width: 0 32px 20px 0;
border-color: transparent #ff0d1e transparent transparent;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
}
<span class="speech-bubble"></span>
You could do something like this using transform: skew(); and border-radius. I added z-index: -1 to the pseudo-element so it sits behind the <span> (I'm assuming you will put text inside).
.speech-bubble {
position: relative;
background: #ff0d1e;
display: inline-block;
width: 239px;
height: 95px;
margin: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
content: "";
position: absolute;
top: 25px;
left: -32px;
width: 70px;
height: 30px;
background-color: #ff0d1e;
transform: skew(55deg);
transform-origin: top right;
border-radius: 15% 0 0 0 / 25%;
z-index: -1;
}
<span class="speech-bubble"></span>
It's still slightly pointed, but if you used corner-specific border-radius properties you can get a similar effect.
Here I used border-top-left-radius and border-bottom-left-radius.
.speech-bubble {
position: relative;
background: #ff0d1e;
display: inline-block;
width: 239px;
height: 95px;
margin: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.speech-bubble:after {
content: "";
position: absolute;
top: 25px;
left: -32px;
width: 0;
height: 0;
border-style: inset;
border-width: 0 32px 20px 0;
border-color: transparent #ff0d1e transparent transparent;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
border-top-left-radius:80%;
border-bottom-left-radius:200%;
}
<span class="speech-bubble"></span>
Here is a shadow that I am trying to replicate using just CSS and I just cannot work out how to do it. I have spent hours trying. I think I need to create 2 shadow elements but I'm not sure how to proceed.
The closest thing I get is with this (an abysmal attempt - I know):
.type-product:before, .type-product:after{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 21px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 35px 20px #777;
transform: rotate(-8deg);
}
.type-product:after{
transform: rotate(8deg);
right: 20px;
left: auto;
}
Most appreciative if any CSS gurus could provide any help.
NOTE: I don't think that this link covers my problem fully. It just discusses the curve - whilst I need a curve with a color-gradient...
To me that looks like something that can be achieved using a couple of elements like shown below. The shadow is actually a linear-gradient on top of which a white circle is placed. The drawback of this approach is that it would work only with a solid background (because the circle that is overlayed would need a solid color).
That just doesn't look like it could be possible using a box-shadow because the shadow itself seems like a gradient which goes from transparent or white on the left to black in the middle to transparent or white again on the right.
The output is responsive and can adapt itself to all dimensions of the parent container. Just :hover the container in the snippet to see it in action :)
.wrapper {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.content {
height: 85%;
width: 100%;
border: 1px solid;
}
.wrapper:before {
position: absolute;
content: '';
bottom: 0px;
left: 0px;
height: 15%;
width: 100%;
background: linear-gradient(to right, transparent 2%, #444, transparent 98%);
}
.wrapper:after {
position: absolute;
content: '';
bottom: -186%;
/* height of before - height of after - 1% buffer for the small gap */
left: -50%;
height: 200%;
width: 200%;
border-radius: 50%;
background: white;
}
* {
box-sizing: border-box;
}
/* just for demo */
.wrapper {
transition: all 1s;
}
.wrapper:hover {
height: 300px;
width: 400px;
}
<div class='wrapper'>
<div class='content'></div>
</div>
You can do this with :before pseudo element and box-shadow
div {
width: 200px;
height: 100px;
border: 1px solid #aaa;
position: relative;
background: white;
}
div:before {
content: '';
border-radius: 50%;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
left: 0;
transform: translateY(103%);
box-shadow: 0px -54px 13px -47px #000000, -4px -45px 35px -28px #999999;
}
<div></div>
Aside from the answers, this could also be a good box shadow for your class as well. (This is just preference & similar to what you want).
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.type-product {
position: relative;
}
.type-product:before {
z-index: -1;
position: absolute;
content: "";
bottom: 17px;
left: 10px;
width: 50%;
top: 70%;
max-width: 300px;
background: #777;
box-shadow: 0 18px 20px #777;
transform: rotate(-8deg);
}
.type-product:after {
z-index: -1;
position: absolute;
content: "";
bottom: 17px;
right: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
box-shadow: 0 18px 20px #777;
transform: rotate(8deg);
}
<div class="type-product box">
</div>
Hope you like it.
Consider the following -
#banner {
width: 100%;
height: 50px;
box-shadow: 0 0 10px #000000;
background: #63B0F2;
}
#circle {
position: relative;
top: 20px;
height: 80px;
width: 80px;
margin: 0 auto;
border-radius: 50%;
box-shadow: 0 0 10px #000000;
background-color: white;
}
<div id="banner">
<div id="circle">
</div>
</div>
Is it possible to remove/clip the drop-shadow cast by the top half of the white square onto the blue div?
To put it another way, so there is only shadow cast onto the background, but not each other?
Possible solution with pseudo-elements :before and :after. Just add to your CSS:
#circle:before{
position: absolute;
content: "";
width: 150%;
height: 50%;
left: -25%;
top: -10px;
background: #63B0F2;
}
#circle:after{
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: white;
border-radius: 50%;
}
DEMO
Add a second element for the shadow and position it behind the banner using z-index.
.shadow,
.circle {
display: block;
height: 120px;
width: 120px;
position: absolute;
bottom: -100%;
left: calc(50% - 62px);
border-radius: 50%;
}
.shadow {
box-shadow: 0 0 1em -.125em rgba(10,10,10,.1), 0 0 0 1px rgba(10, 10, 10, .2);
border: 2px solid transparent;
z-index: -1;
}
.circle {
background: #e0e0e0;
border: 2px solid white;
}
See this codepen, in which I have used ridiculous colors to illustrate my point: https://codepen.io/pen/?editors=0100
I would like a div to look like this:
but would only like to use CSS, how would I go about creating a shape like this?
Do I create custom border for the top and bottom?
You can look at the code here, it does exactly what you want: http://codepen.io/orhanveli/pen/tbGJL
The code from the website:
HTML
<!-- Lets create a CSS3 stamp -->
<div class="stamp">
<!-- the image -->
<img src="http://thecodeplayer.com/uploads/media/css3logo.png" />
</div>
CSS
*{margin: 0; padding: 0;}
body {
background: #B1d202;
padding: 100px;
text-align: center;
}
.stamp {
width: 280px;
height: 180px;
display: inline-block;
padding: 10px;
background: white;
position: relative;
-webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
/*The stamp cutout will be created using crisp radial gradients*/
background: radial-gradient(
transparent 0px,
transparent 4px,
white 4px,
white
);
/*reducing the gradient size*/
background-size: 20px 20px;
/*Offset to move the holes to the edge*/
background-position: -10px -10px;
}
.stamp:after {
content: '';
position: absolute;
/*We can shrink the pseudo element here to hide the shadow edges*/
left: 5px; top: 5px; right: 5px; bottom: 5px;
/*Shadow - doesn't look good because of the stamp cutout. We can still move this into another pseudo element behind the .stamp main element*/
/*box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);*/
/*pushing it back*/
z-index: -1;
}
/*Some text*/
.stamp:before {
content: 'CSS3';
position: absolute;
bottom: 0; left: 0;
font: bold 24px arial;
color: white;
opacity: 0.75;
line-height: 100%;
padding: 20px;
}
.stamp img {
}
If you want to only have the borders on the top and on the bottom of your image you can create this by using pseudo elements.
.stamp {
margin-top: 50px;
margin-left: 50px;
position: relative;
width: 500px;
height: 300px;
background: #bbb;
-webkit-filter: drop-shadow(3px 3px 1px black);
filter: drop-shadow(0px 0px 5px white);
}
.stamp:before {
position: absolute;
top: -20px;
display: block;
content: "";
background: radial-gradient(circle, transparent 15px, #bbb 16px);
background-size: 50px 40px;
background-position: -20px -20px;
width: 100%;
height: 40px;
z-index: -1;
}
.stamp:after {
position: absolute;
bottom: -20px;
content: "";
display: block;
background: radial-gradient(circle, transparent 15px, #bbb 16px);
background-size: 50px 40px;
background-position: -20px -20px;
width: 100%;
height: 40px;
z-index: -1;
}
body {
margin: 0;
background-color: #333;
}
<div class="stamp">
</div>
You could use the mask-box-image property to do this.
FIDDLE
See this html5 Rocks article on masking
<img src="http://www.html5rocks.com/en/tutorials/masking/adobe/humayun-thom-arno.jpg" />
CSS
img {
-webkit-mask-box-image: url(http://www.html5rocks.com/en/tutorials/masking/adobe/stampTiles.svg) 35 repeat;
mask-box-image: url(http://www.html5rocks.com/en/tutorials/masking/adobe/stampTiles.svg) 35 repeat;
}