I'm trying to reproduce this image using only css
I've played with the radius property but as you will see I don't get the same angle effect.
.shape{
background-color: black;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
color:white;
font-weight:bold;
padding: 30px 30px 30px 50px;
text-align:center;
position:absolute;
right:0;
bottom:0;
z-index:1003;
font-size: 20px;
border-top-left-radius: 125px;
-moz-border-radius-topright: 125px;
}
You can see what I've tried at http://jsfiddle.net/ymorin007/7qX4U/
Thanks.
Might not be cross-browser compatible, but this'll get you close :)
.shape{
background-color: black;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
color:white;
font-weight:bold;
padding: 30px 30px 30px 50px;
text-align:center;
position:absolute;
right:0;
bottom:0;
z-index:1003;
font-size: 20px;
border-top-left-radius: 125px;
-moz-border-radius-topright: 125px;
}
.shape::before{
content:"";
width:0;
height:0;
position:absolute;
left:-34px;
border-left: 53px solid transparent;
border-right: 53px solid transparent;
border-bottom: 53px solid black;
}
fiddle: http://jsfiddle.net/pggRb/
If you needed to hit test, you may want to consider using a skewed pseudo element:
div {
position: fixed;
bottom: 0;
right: 0;
height: 50px;
width: 200px;
background: gray;
cursor: pointer;
transition: all 0.6s;
}
div:before {
content: "";
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: inherit;
transform: skewX(-45deg);
border-radius: 20px 0 0 0;
z-index: -1;
}
div:hover {
background: tomato;
]
<div>SOME TEXT</div>
Related
I need help with this problem
I want to do with css a figure like this:
I want to do a trapeze with a "rounded" protuberance in the middle.
I tried to put a trapeze back with z-index 0 an the other rounded with z-index 1, but i couldn't. Another solution for me was using svg but neither, it complicated me more.
Thanks for your help.
I tried to do this:
<style>
.left {
height: 66px;
background: blue;
float: left;
position: relative;
border-top-right-radius: 19px;
width: 370px;
}
.left:after {
content: '';
position: absolute;
right: -23.5px;
bottom: 0px;
border-top: rgba(255,255,255,0.1) 56px solid;
border-left: 26px solid #0000ff;
width: 0;
z-index: 1;
}
#trapezoid {
border-bottom: 100px solid #0000ff;
border-right: 50px solid transparent;
height: 0;
width: 330px;
}
`
You can use skew transformation like follow:
.box {
height:100px;
margin-right:50px;
position:relative;
z-index:0;
transform:skew(25deg);
transform-origin:bottom left;
}
.box:before {
content:"";
position:absolute;
top:0;
left:0;
right:20px;
bottom:50%;
background:green;
}
.box:after {
content:"";
position:absolute;
top:50%;
left:0;right:0;bottom:0;
background:green;
border-top-right-radius:20px;
}
body {
margin:0;
}
<div class="box"></div>
Reduce the width of trapezoid
.left {
height: 66px;
background: blue;
float: left;
position: relative;
border-top-right-radius: 19px;
width: 370px;
}
.left:after {
content: '';
position: absolute;
right: -23.5px;
bottom: 0px;
border-top: rgba(255,255,255,0.1) 56px solid;
border-left: 26px solid #0000ff;
width: 0;
z-index: 1;
}
#trapezoid {
border-bottom: 80px solid #0000ff;
border-right: 50px solid transparent;
height: 0;
width: 300px;
}
<div id="trapezoid"></div>
<div class="left"></div>
I have this:
.striped-border {
border: 8px solid transparent;
border-image: url(../img/stripes.png) 9 round;
}
What I want:
Is it possible to apply an opacity to the border-image only and not the content?
You can use pseudo-element to create border with border-image and then set opacity.
div {
position: relative;
margin: 50px;
font-size: 25px;
padding: 10px 25px;
display: inline-block;
}
div:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 5px solid transparent;
border-image: url('http://www.circlek.org/Libraries/2013_branding_design_elements/graphic_CKI_horizontal_stripesblue_RGB.sflb.ashx') 22 22 repeat;
transform: translate(-5px, -5px);
opacity: 0.4;
}
<div>Element</div>
<div>Element <br> lorem</div>
What about something like it:
.striped-border:after{
content:"";
position:absolute;
top:0; bottom:0; left:0; right:0;
border:8px solid rgba(256,256,256, 0.5);
}
I created a border effect using selectors that shows only on corners as you can see in the following snippet.
html {
box-sizing: border-box !important;
}
*, *:before, *:after {
box-sizing: inherit;
}
.ix-border{
position: relative;
padding: 0;
margin: 0;
border-style: solid;
display: inline-block;
border-width: 1px;
background-color: transparent;
border-color: #A00;
}
.ix-border, .ix-border:hover, .ix-border:before, .ix-border:after{
transition: 0.42s;
}
.ix-border:before, .ix-border:after{
content:'';
position:absolute;
padding: 0;
margin: 0;
border-style: solid;
display: inline-block;
border-width: 1px;
background-color: transparent;
border-color: #FFF;
}
.ix-border:before{
top: 8px; right:-1px; bottom: 8px; left:-1px;
border-width: 0 1px 0 1px;
}
.ix-border:after{
top:-1px; right: 8px; bottom:-1px; left: 8px;
border-width: 1px 0 1px 0;
}
.ix-border:hover{
border-color: #F00;
}
.ix-border:hover:before{
top: 16px; bottom: 16px;
border-width: 0 1px 0 1px;
}
.ix-border:hover:after{
right: 16px; left: 16px;
border-width: 1px 0 1px 0;
}
.elmt{
width: 120px;
height: 60px;
text-align: center;
line-height: 60px;
}
<div class="elmt ix-border">
Hello World
</div>
However, I noticed that when a zoom is performed, the element border, that is supposed to be hidden by the ::before/::after selector borders, is sometimes randomly visible on one or two sides, depending on the zoom factor and the navigator.
I added the box-sizing:border box so that borders are included in zooming calculations, as suggested here but it's still not fixed.
So, am I missing something? Is there any hack to fix it or any other way (css only) to achieve to same effect?
This is really good question but I think it is really hard to do with pseudo elements and CSS only ,so I will suggest an alternative approach with real html elements like this so now you avoid the issue but have an extra html elements :(
.corners {
position: relative;
height: 150px;
padding: 10px;
position: relative;
text-align: center;
width: 150px;
padding: 10px;
line-height:150px;
font-size:16px;
}
.top, .bottom {
position: absolute;
width: 10px;
height: 10px;
}
.top {
top: 0;
border-top: 1px solid;
}
.bottom {
bottom: 0;
border-bottom: 1px solid;
}
.left {
left: 0;
border-left: 1px solid;
transition: all 0.42s;
}
.right {
right: 0;
border-right: 1px solid;
transition: all 0.42s;
}
.corners:hover .right{
width:20px;
height:20px;
border-color:red;
}
.corners:hover .left{
width:20px;
height:20px;
border-color:red;
}
<div class="corners">
<div class="top left"></div>
<div class="top right"></div>
<div class="bottom right"></div>
<div class="bottom left"></div>
content goes here
</div>
Ok here is my another take on the issue this time I am using only 3 html elements
div {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
text-align:center;
line-height: 100px;
}
div div:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -10px;
left: -10px;
border-top: 1px solid #000;
border-left: 1px solid #000;
transition: all 0.42s;
}
div div:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -10px;
right: -10px;
border-top: 1px solid #000;
border-right: 1px solid #000;
transition: all 0.42s;
}
div div {
margin: 0;
position: absolute;
top: 0;
}
span:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -10px;
left: -10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
transition: all 0.42s;
}
span:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -10px;
right: -10px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transition: all 0.42s;
}
div:hover span:after{
width:30px;
height:30px;
border-color:red;
}
div:hover span:before{
width:30px;
height:30px;
border-color:red;
}
div:hover div:before{
width:30px;
height:30px;
border-color:red;
}
div:hover div:after{
width:30px;
height:30px;
border-color:red;
}
<div>some content<div></div><span></span></div>
I am trying to create an element using Bootstrap that looks like this image
This is the screen shot of how far I have gone
I have never worked on pseudo classes and am finding it very difficult to get the exact shape. Please take a look at my code and help me figure it out. I have included only the second (thee one on the right side in the screenshot) clipboard's code here.
HTML
<div class="col-xs-12 col-sm-6">
<div class="clip">
<div class="circle"></div>
</div>
<div class="pad">
<div class="paper"></div>
</div>
</div>
CSS
.clip, .circle{
position: relative;
}
.clip::after, .clip::before, circle:after, .circle:before{
display: block;
position: absolute;
content: "";
z-index: 50;
}
.clip:before{
top: 12.5px;
left: 15%;
width: 70%;
border-bottom: solid 50px grey;
border-left: solid 150px transparent;
border-right: solid 150px transparent;
}
.clip:after{
top: 60px;
left: 15%;
width: 70%;
border-bottom: solid 55px grey;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.circle:before{
top: 10px;
left: 70%;
width: 20%;
height: 50px;
border-radius: 50%;
border-right: solid 150px yellow;
}
because there is no SVG tag, i'll go with pseudo & gradient :
div {
position:relative;
float:left;
margin:60px 60px 80px;
width:180px;
height:200px;
border-radius:15px;
background:white;
box-shadow:/* draw inside part of border */0 0 0 20px #159E91, inset -1px -1px 1px;
}
div:before {/*to draw outside part of border with same radius inside/out */
z-index:-1;
border-radius:20px;
content:'';
border: 20px solid #159E91;
position:absolute;
top:-30px;
left:-30px;
right:-30px;
bottom:-30px;
box-shadow:0 -2px 2px rgba(30, 162, 149, 0.2), 0 0 2px white, 0 5px 5px -3px rgba(0,0,0,0.5)
}
div:after {/* draw gradient underneath clipper */
content:'';
position:absolute;
top:0;
border-radius: 0 15px 0 0;
left:26px;
width:152px;
height:150px;
background:
linear-gradient(45deg, white 40%, rgba(255,255,255,0) 40% ),/* mask*/
linear-gradient(-45deg, white , transparent 70%),/* mask*/
linear-gradient(to right , rgba(0,0,0,0.25) , rgba(0,0,0,0.15)),transparent ;
}
.clipper {/* hold clipper shape actually */
display:block;
width:128px;
height:80px;
margin: -52px auto 30px;
position:relative;
z-index:1;
overflow:hidden;
}
.clipper b {/* show the clipper shape */
border-radius:35px;
position:absolute;
height:150%;
width:100%;
box-shadow: 0 0 1px 1px gray;
left:50%;
top:-12px;
transform-origin:0 0;
transform:rotate(45deg);
overflow:hidden;
}
.clipper b:before {/* draw the hoe and paint around it */
content:'';
display:block;
border-radius:100%;
height:29px;
width:29px;
margin:20px;
box-shadow:inset -1px -1px 1px gray, 0 0 0 100px #3B3B3B, inset 1px 1px 2px rgba(0,0,0,0.5);
}
/* to match fake picture's text */
.clipper ~ span {
display:block;
background:#353535;
margin:10px 58px;
padding:5px;
position:relative;
z-index:1;
}
.clipper ~ span:last-of-type {
display:block;
background:#353535;
margin:10px 85px 10px 58px;
}
<div>
<span class="clipper"><b></b></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
but that's really much CSS for just a shape, where an image or an SVG would do fine for the design.
You can play with it here : http://codepen.io/gc-nomade/pen/rLYYZx
https://jsfiddle.net/ahe128/esmrLzuv/5/
i did something but this is realy hard work i will try complete this :)
.clip,
.circle {
position: relative;
}
.clip::after,
.clip::before,
circle:after,
.circle:before {
display: block;
position: absolute;
content: "";
z-index: 50;
}
.clip:before {
top: 1rem;
left: 10%;
width: 20%;
border-bottom: solid 50px grey;
border-left: solid 150px transparent;
border-right: solid 150px transparent;
}
.clip:after {
top: 4.65rem;
left: 10%;
right:10%;
width: 82%;
border-bottom: solid 4.3rem grey;
border-top-left-radius: 0.8rem;
border-top-right-radius: 0.8rem;
border-bottom-left-radius: 0.4rem;
border-bottom-right-radius: 0.4rem;
}
.circle:before {
top: 0.78rem;
height: 1px;
width:1px;
border-radius: 50%;
border: solid 25px white;
z-index:100;
left:47%
}
Finally.......I got it working (except the diagonal gradient). But it's not responsive yet. My aim is to keep each Clipboard's design intact and stack them one below the other in small screens. Can someone please point out where I'm missing it !!
Also, if there's a better way of doing it in Pure CSS then I'd love to see it.
Fiddle: https://jsfiddle.net/chandannadig/esmrLzuv/7/
/*Clip*/
.clip, .circle{
position: relative;
}
.clip::after, .clip::before, circle:after, .circle:before{
display: block;
position: absolute;
content: "";
}
.clip:before{
z-index: 50;
top: 1rem;
left: 6.958rem;
width: 29rem;
border-bottom: solid 4rem grey;
border-left: solid 11.5rem transparent;
border-right: solid 11.5rem transparent;
}
.clip:after{
top: 4.7rem;
left: 6.958rem;
width: 29rem;
z-index: 50;
border-bottom: solid 4rem grey;
border-top-left-radius: 0.8rem;
border-top-right-radius: 0.8rem;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
.circle{
position: absolute;
z-index: 60;
top: 0.4rem;
left: 15.6rem;
width: 12rem;
height: 8rem;
background: grey;
border-radius: 50%;
}
.circle::before{
z-index: 60;
top: 1rem;
left: 4.2rem;
width: 3.5rem;
height: 3.5rem;
background: white;
border-radius: 50%;
}
/*End of Clip*/
I am wondering, is there a way to create shadow linke on the images below (possibly using pseudo class?)
The red bit behind grey box meant to be shadow with trapeze shape and no blur.
Now idea if its possible?
Thank you for your help in advance.
DEMO 1:
HTML:
<figure></figure>
CSS:
figure{
width:150px;
height:150px;
margin:50px auto;
background:#ccc;
position:relative;
box-shadow: 0 14px 0 -10px red;
}
figure:before, figure:after{
content:'';
position:absolute;
top: 2px;
width:0;
height:0;
}
figure:before{
left: -5px;
border-left: 5px solid transparent;
border-right: 0px solid transparent;
border-top: 77px solid red;
}
figure:after{
right: -5px;
border-left: 0px solid transparent;
border-right: 5px solid transparent;
border-top: 77px solid red;
}
DEMO 2
figure{
width:150px;
height:150px;
margin:50px auto;
background:#ccc;
position:relative;
box-shadow: 0 12px 0 -10px red;
}
figure:before{
content:'';
position:absolute;
top: -10px;
left: 0;
width:100%;
height:100%;
background:red;
z-index: -1;
-webkit-transform-style: preserve-3d;
-webkit-transform: perspective(800) rotateX(-40deg);
}
Just in case of using CSS3 features, you could create a trapeze by applying a transform on a pseudo-element and position that behind the box as follows:
EXAMPLE HERE
.box {
width: 200px; /* Optional */
/* height: 150px; */ /* Optional */
position: relative;
}
.box:before {
content: "";
position: absolute;
background-color: lightgray;
top: -3%; bottom: -12%; left: 0; right: 0;
transform: perspective(50em) rotateX(-30deg);
z-index: -1;
}
Therefore dimensions of the shadow box would be relative to the box. However it is not supported in IE 9 and below.