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);
}
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 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.
I am trying to represent my HTML/CSS tab like on the picture.
I have already tried lots of things with border-radius without any success.
Do you have any tracks so that I can reproduce my tabs like the picture only with CSS?
In order to make the same borders (also inside the triangles) as in the image, you can use pseudo elements and transform rotate :
DEMO
output :
HTML :
<div>Critiques</div>
<div>Messages sur le forum</div>
<div>Actualités</div>
CSS :
div{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
padding-right:12px;
line-height:50px;
float:left;
width:200px;
position:relative;
z-index:0;
text-align:center;
}
div:after,div:before{
content:'';
position:absolute;
width:10px;
height:10px;
background:#fff;
z-index:999;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
div:before{
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
top:0; left:-12px;
-ms-transform-origin:100% 0;
-webkit-transform-origin:100% 0;
transform-origin:100% 0;
}
div:after{
border-left:1px solid #ccc;
border-top:1px solid #ccc;
bottom:0;
right:4px;
-ms-transform-origin:0 100%;
-webkit-transform-origin:0 100%;
transform-origin:0 100%;
}
div:first-child:before, div:last-child:after{
display:none;
}
You could that with css only but with an empty span (If you would like to have half triangles in the edges):
HTML
<ul>
<li><span></span>one</li>
<li><span></span>two</li>
<li><span></span>three</li>
</ul>
CSS
ul {
font-size: 0;
}
li {
background: red;
display: inline-block;
padding: 30px;
font-size: 15px;
position: relative;
}
span {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
li:after {
width: 0;
height: 0;
border-top: 10px solid white;
border-left: 10px solid transparent;
position: absolute;
right: 0;
top: 0;
content: "";
}
li:before {
width: 0;
height: 0;
border-top: 10px solid white;
border-right: 10px solid transparent;
position: absolute;
left: 0;
top: 0;
content: "";
}
span:before {
width: 0;
height: 0;
border-bottom: 10px solid white;
border-right: 10px solid transparent;
position: absolute;
left: 0;
bottom: 0;
content: "";
}
span:after {
width: 0;
height: 0;
border-bottom: 10px solid white;
border-left: 10px solid transparent;
position: absolute;
right: 0;
bottom: 0;
content: "";
}
An example: http://jsfiddle.net/fC9Fs/
Here is another take on it:
This one works with a basic list and no other HTML is needed.
Also as you've shown in your image, the first and last elements do not have the arrow.
Fiddle
HTML:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
CSS:
html, body{
background:#E5E2E2;
}
ul{
display:inline-block;
list-style-type:none;
border:1px solid #CCCCCC;
padding:0;
}
li{
float:left;
padding:10px 15px;
background:#F4F4F4;
position:relative;
}
li:nth-child(n+2):before{
content:'';
position:absolute;
left:-5px;
top:-1px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #e5e2e2;
}
li:nth-child(n+2):after{
content:'';
position:absolute;
left:-5px;
bottom:-1px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #e5e2e2;
}
You can do this with an octagon shape, as shown in this link.
The relevant code:
#octagon { width: 100px; height: 100px; background: red; position: relative; }
#octagon:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; } #octagon:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; }
You can edit the borders from the above code to get the exact shape you want.
I come with another pseudo options that allows to cut corners and allow to see main background behind: DEMO
Borders can be done too : DEMO with borders
The method is to draw background-color from box-shadow on rotated pseudo-elements wich basic border triangle cannot achieve. Pseudo element can take almost any shapes from radius and transform ... if that gives some ideas :)
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>