I have a little question.
I have div 200*200 px. I need effect:
- when user mouse hover on div: alpha 70% black picture
- show new button at middle of picture (or textual link) for example "Add to cart"
You can see my example here: http://jsfiddle.net/t8jPN
<div class="wrapper">
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEW</div></div>
<img src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg"></img>
</div>
.wrapper {
margin: 50px auto;
width: 200px;
height: 200px;
background: white;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #ffffff;
text-align: center;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
Thanks
The basic idea is have wrapper for three divs. One div with the image, one div with the shadow and other for the button.
The reason there are separate divs for the shadow and the button (or link) is to avoid the transparency effect on the button.
I guess there are better ways to solve the problem but i would use this one because i find it easier.
Demo http://jsfiddle.net/chepe263/a97FS/10/
<html>
<head>
<style type="text/css">
.contenedor{
position:relative;
width: 200px;
height: 200px;
border: 1px solid black;
}
.atCorner{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.escondido{
display: none;
}
.shadow{
background-color: black;
zoom: 1;
filter: alpha(opacity=70);
opacity: 0.7;
}
.button{
text-align: center;
}
.button button{
margin-top: 40%;
}
</style>
<script type="text/javascript">
$('.contenedor').mouseenter(function(){
jQuery(this).find('.shadow, .button').fadeIn();
}).mouseleave(function(){
jQuery(this).find('.shadow, .button').fadeOut();
});
</script>
</head>
<body>
<div class="contenedor">
<div class="atCorner" id="picture">
<img src="http://cdn.sheknows.com/articles/2011/05/summer-dresses4.jpg" />
</div>
<div class="atCorner escondido shadow" id="">
</div>
<div class="atCorner escondido button" id="">
<button>Buy it</button>
</div>
</div>
</body>
</html>
Related
I have an element with a known ID I can target. How could I create a bestseller-badge like this with css only? I cannot change the html.
I know how to create this but only if I could edit the html, which I cannot:
.box {
width: 200px; height: 300px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
}
.ribbon {
position: absolute;
right: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#9BC90D 0%, #79A70A 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; right: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #79A70A;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #79A70A;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
<div class="box">
<div class="ribbon"><span>Bestseller</span></div>
</div>
The thing is I only have the parent box and not the ribbon inside. I cant input html.
Because in pseudo elements you can't put any html markup, you need to get clever with just using simple shapes and combining them together. Additionally, you can't have multiple :after pseudo elements, so we are limited to just two shapes (one for :after and one for :before). The one in :after could be the bestseller front of the badge, with text. The trickiest part was to get the clip-path: polygon(...points) to get right so that we get the effect of trimmed ribbon. Fortunately, Firefox dev tools have a nifty polygon modification tool that was very helpful. Getting the two little corners that make the "wrap around" effect was a bit trickier, but putting it in a :before pseudo element with z-index: -1 and a little hand-tweaked offset did the trick. The end effect is below:
.box {
width: 200px; height: 300px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
margin: 20px;
display: inline-block;
}
.bestseller:before {
content: "";
z-index: -1;
overflow: hidden;
transform: rotate(-135deg);
width: 120px;
display: block;
background: #79A70A;
background: linear-gradient(#9BC90D 0%, #79A70A 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 34px;
right: -16px;
clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 0px 20px, 10px 30px, 110px 30px);
height: 20px;
width: 120px;
}
.bestseller:after {
content: "bestseller";
z-index: 1;
overflow: hidden;
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
width: 120px;
display: block;
background: #79A70A;
background: linear-gradient(#9BC90D 0%, #79A70A 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 20px; right: -30px;
clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 0px 20px, 10px 30px, 110px 30px)
}
<div class="box">
</div>
<div class="box bestseller">
</div>
With the help of only CSS using pseudo class, we cannot create exactly the same but similar to that is possible. Add the id "ribbon" to div with class "box" and try with the below css. Increment/decrement the height, top right, etc based on the size of your div.
#ribbon:before {
content: "";
width: 60px;
display: block;
position: absolute;
top: 14px;
right: -28px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid green;
height: 0;
}
#ribbon:after {
content: "Bestseller";
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 30px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 60px;
display: block;
position: absolute;
top: 14px;
right: 2px;
height: 30px;
}
Instead of trying with border for the background color of ribbon, you can also try using an ribbon image as background and use the text on top of it.
I have wasted 2 days to create a shadow effect like here.
You see, the front white buttons look not flat, don't know how to describe. I bet this is because of box shadow effect, inset or something like that. But I can't make the same.
Can anyone help to make such a button with the same design, effect?
My example
.button {
background-size: 400% auto;
background: linear-gradient(to top right, rgb(247, 212, 167), #eef2f3);
border-radius: 7%;
box-shadow: inset 4px -4px 1px 1px rgb(252, 205, 144), inset -4px 4px 1px 1px white, -15px 25px 25px 0px rgba(0, 0, 0, .3);
width: 200px;
height: 200px;
-webkit-transition: all .1s linear;
transition: all .2s linear;
left: 0;
transform: rotate(45deg);
}
<div class="button main-circle"></div>
Here is an idea using some gradient and pseudo elements:
.box {
width: 100px;
height: 100px;
margin: 100px;
border: 3px solid #e0e1e6;
border-radius: 10px;
background: linear-gradient(to right, #b9b7dc, #a7a7c9);
transform: rotate(45deg);
position: relative;
z-index: 0;
box-sizing: border-box;
}
.box:before {
content: "";
position: absolute;
z-index: 2;
top: 30%;
left: -32%;
width: 100px;
height: 100px;
border: 3px solid #fefefe;
border-radius: 10px;
background: linear-gradient(to right, #e0e0e0, #fefefe);
box-sizing: border-box;
}
.box:after {
content: "";
position: absolute;
z-index: 1;
top: 30%;
left: -31%;
width: 100px;
height: 100px;
border-radius: 10px;
background: linear-gradient(to right, rgba(0,0,0,0.3),rgba(0,0,0,0.1));
box-sizing: border-box;
transform: skewY(11deg) scaleX(1.15);
filter: blur(4px);
transform-origin: top left;
}
body {
background: pink;
}
<div class="box"></div>
I have a div with a 1px border and I'm trying to create a 3px border in another color to that div. I'm using this code:
box {
border: 1px solid #ddd;
border-top: 3px solid #3F9BD0;
}
but at the corners the border is not good, see image:
How can I make this border look good, like this:
fiddle: https://jsfiddle.net/15tory3z/
Instead of border-top, try using the :after pseudo-element to recreate the effect you want.
.box {
width: 200px;
height: 100px;
border: 1px solid #ddd;
position: relative;
}
.box:after {
position: absolute;
content: "";
width: 100%;
height: 5px;
top: -5px;
background: dodgerblue;
padding: 1px;
left: -1px;
}
<div class="box"></div>
Choice 2:
Use linear-gradient().
.box {
width: 200px;
height: 100px;
border: 1px solid #ddd;
background: -webkit-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -moz-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -o-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: -ms-linear-gradient(top, dodgerblue 5%, #fff 5%);
background: linear-gradient(top, dodgerblue 5%, #fff 5%);
}
<div class="box"></div>
You could draw these with inset shadows and padding :
div {
padding:12px 5px 5px;
width: 40%;
height: 200px;
box-shadow: inset 0 10px #3F9BD0, inset 4px 0 gray, inset -4px 0 gray, inset 0 -4px gray
}
<div></div>
or just an outset top shadow
div {
width: 40%;
height: 200px;
border:2px solid gray;
border-top:none;
box-shadow: 0 -10px #3F9BD0;
margin-top:12px;
}
<div></div>
else, background gradient could be used and even animated 2 examples : http://codepen.io/gc-nomade/pen/IGliC or http://codepen.io/gc-nomade/pen/pKwby
This also puts a line on top:
.box1 {
border: 10px solid #ddd;
border-top: 0;
box-shadow: 0 -30px 0 #3F9BD0;
float: left;
width: 300px;
height: 300px;
}
<div class="box1"></div>
Use css :after pseudo-class, docs
.box_big {
border: 10px solid #ddd;
position:relative;
z-index: 1;
}
.box_big:after{
height: 10px;
position: absolute;
top:-10px; left:-10px; right:-10px;
content: " ";
z-index: 2;
background: red;
}
.box {
border: 1px solid #ddd;
position:relative;
z-index: 1;
}
.box:after{
height: 3px;
position: absolute;
top:-3px; left:-1px; right:-1px;
content: " ";
z-index: 2;
background: red;
}
<div class="box_big">
big box
</div>
<hr />
<div class="box">
your box
</div>
Welcome to the css borders. The only way to properly do that is using :after or :before pseudoelements.
Fiddle
.box {
border: 1px solid #ddd;
position: relative;
}
.box:after {
position: absolute;
display: block;
content:'';
/* Positioning */
top: 0;
width: 100%;
height: 3px;
left: 0;
right: 0;
/* Color */
background-color: #3F9BD0;
}
Try this:
.box {
outline: 2px solid #ddd;
margin-top: -2px;
border-top: 10px solid #3F9BD0;
min-width:100px;
min-height:100px;
float:left;
}
<div class="box"></div>
The question is a bit old but I thought I'd make a suggestion that worked for me in a similar situation.
I just set border-width: 0; and that took away the mitered ends and made them nice and square for a button that I had a bottom-border applied.
I have circles nested within and centered ontop of each other in the html. I want to remove the boxshadow hover of the largest circle when I hover over the second largest. When I hover over the next consecutive circles they keep the hover on from the previous circles. I tried to make that hover cancel out using this boxshadow: none but to no avail.
I posted my html and css codes
<!-- language: lang-css -->
body, header {
width: 760px;
height: 760px;
margin: 0 auto;
}
.container {
width: 760px;
height: 760px;
}
.circle1 {
background-image: url("images/circle4.svg");
width: 100%;
height: 100%;
vertical-align: middle;
border-radius: 50%;
margin: 50px;
display: inline-block;
background-size: contain;
opacity: 1;
}
.circle2 {
background-image: url("images/circle3.svg");
width: 75%;
height: 75%;
border-radius: 50%;
position: relative;
margin: 94px;
display: inline-block;
background-size: contain;
opacity: 1;
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.6);
transition: box-shadow 1s ease-in-out;
}
.circle3 {
background-image: url("images/circle2.svg");
width: 60%;
height: 60%;
border-radius: 50%;
position: relative;
margin: 112px;
display: inline-block;
background-size: contain;
opacity: 1;
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.6);
transition: box-shadow 1s ease-in-out;
}
.circle4 {
background-image: url("images/circle1.svg");
width: 40%;
height: 40%;
border-radius: 50%;
position: relative;
margin: 104px;
display: inline-block;
background-size: contain;
opacity: 1;
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.6);
transition: box-shadow 1s ease-in-out;
}
.circle1:hover .circle2{
box-shadow: 0px 0px 0px 100px rgba(255, 255, 255, .8);
}
.circle2:hover .circle3{
box-shadow: 0px 0px 0px 117px rgba(255, 255, 255, .8);
}
.circle3:hover .circle4{
box-shadow: 0px 0px 0px 105px rgba(255, 255, 255, .8);
}
.circle2:hover .circle1{
box-shadow: none;
}
.circle3:hover .circle2{
box-shadow: none;
}
.circle4:hover .circle3{
box-shadow: none;
}
<!DOCTYPE HTML>
<head>
<title>
My Website!
</title>
<link rel="stylesheet" type="text/css" href="homestyle.css" />
</head>
<body>
<header>
<div class="container">
<div class="circle1">
<div class="circle2">
<div class="circle3">
<div class="circle4">
</div>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
I'm trying to change Chris's corner ribbon snippet at http://jsfiddle.net/chriscoyier/H6rQ6/1/. I want the ribbon to be at left instead of right
This is what i have done so far http://jsbin.com/imUQula/1/ the upper part & lower part of ribbon are not changing . I want the upper part flat horizontal & bottom flat vertical
css
.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
left: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
Assuming I understood your question correctly, do the below changes to your CSS to get it working the way you want:
.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
overflow: hidden; /* added to hide the part of the green ribbon which goes out of the wrapper */
}
JSBin Demo
EDIT: Actually, the earlier changes that I had mentioned to the .ribbon-wrapper-green is not required. You could simply do the below instead.
.ribbon-green {
left: -28px; /* changed from left -5px for the purpose of positioning */
}
like this?
http://jsfiddle.net/sudheer105/Fnpn7/
.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
left: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
position: relative;
padding: 7px 0;
right: 30px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
right: 0;
}
.ribbon-green:after {
left: 0;
}