I've found this tutorial
I have an element with background image. So I want to set background image to :before element. But when I try it, there is no background image at all.
Here is fiddle As you can see I set background property:
background: #6D7B8F url('http://i1-win.softpedia-static.com/screenshots/16x16-Free-Application-Icons_1.png') -10px -20px no-repeat;
And it is fine. But if you comment that css code and uncomment other css (implementation of tutorial) the background dissapears.
Check Following Which you need from given tutorial
#settings {
border: 2px solid #666;
border-radius: 7px;
font-size: 2em;
line-height: 5em;
margin: 3em auto;
text-align: center;
width: 12em;
transform: rotate(30deg);
overflow: hidden;
position: relative;
}
#settings::before {
background: url("http://i1-win.softpedia-static.com/screenshots/16x16-Free-Application-Icons_1.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
content: "";
height: 200%;
left: -50%;
position: absolute;
top: -50%;
width: 200%;
z-index: -1;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
<div id="settings">Test</div>
Check Fiddle Here.
Add z-index property, to your :before selector
You code seems just fine.
You should not use the 'overflow:hidden' as it seems to hide the background element in your fiddle.
.kitten {
width: 150px;
height: 150px;
background-color: pink;
}
.kitten::before {
position: absolute;
left: 100px;
content: "";
display: block;
background: url(http://25.media.tumblr.com/tumblr_m9gus8QYjY1rw0ggfo3_r5_400.gif);
background-size: contain;
width: 250px;
height: 250px;
}
<div class="kitten"></div>
Related
I am wondering if below black shape can be made through css, or we need to use SVG for it, please provide css if possible.
In above image, the shape of black div is quite tricky to be done through css, please suggest.
Yes, It can be done by svg, but going not so far, we can do that by css3 also.
div {
margin: 60px auto;
width: 200px;
height: 50px;
position: relative;
background-color: #555;
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
}
span {
display: block;
width: 200px;
height: 60px;
padding: 15px 0;
position: relative;
z-index: 1;
text-align: center;
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
div::before {
content: "";
width: 100%;
height: 20px;
position: absolute;
background-color: #555;
transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
top: -6px;
}
<div>
<span>Phone Number</span>
</div>
Here's a rough sketch .
You can do it with help of :before and :after pseudo elements. then try to mess with border as suggested here
.bigbox:before{
content:'';
color:red;
top:90px;
left:8px;
width: 0;
height: 0;
border-left: 210px solid transparent;
border-right: 0px solid transparent;
border-bottom: 10px solid black;
position:absolute;
}
How can I create a cut-out hexagon shape using CSS?
By cut-out hexagon shape I mean something like this:
I was able to create a hexagon with a background image, but I need it to be like in the image.
.hexagon {
position: relative;
width: 300px;
height: 173.21px;
margin: 86.60px 0;
background-image: url('https://placeimg.com/300/400/any');
background-size: auto 346.4102px;
background-position: center;
}
.hexTop,
.hexBottom {
position: absolute;
z-index: 1;
width: 212.13px;
height: 212.13px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 43.93px;
}
/* Counter transform the background image on the caps */
.hexTop:after,
.hexBottom:after {
content: "";
position: absolute;
width: 300.0000px;
height: 173.20508075688775px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexTop {
top: -106.0660px;
}
.hexTop:after {
background-position: center top;
}
.hexBottom {
bottom: -106.0660px;
}
.hexBottom:after {
background-position: center bottom;
}
.hexagon:after {
content: "";
position: absolute;
top: 0.0000px;
left: 0;
width: 300.0000px;
height: 173.2051px;
z-index: 2;
background: inherit;
}
<div class="hexagon">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
For this transparent cut-out hexagon, I would suggest using an inline SVG with the path element:
svg{
display: block;
width: 70%;
height: auto;
margin: 0 auto;
}
path{
transition: fill .5s;
fill: #E3DFD2;
}
path:hover{
fill: pink;
}
body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-position:center;background-size:cover;}
<svg viewbox="-10 -2 30 14">
<path d=" M-10 -2 H30 V14 H-10z M2.5 0.66 L0 5 2.5 9.33 7.5 9.33 10 5 7.5 0.66z" />
</svg>
Hexagon mask point calculations:
The hexagon coordiantes are pretty easy to calculate. For a regular hexagon in the above orientation:
width = height / sin(60deg)
sin(60deg) ~=0.866
If width is 10 (like in the above example) the coordinates are:
You can find these coordinate in the d attribute after the second M.
Why use SVG?
The main advantages of using SVG in this case are:
Maintainability (example: imagine you need to change the color of the mask. In SVG it is clear what you need to change and there is only one attribute to change.)
Shorter code
You can easily use an image or gradient to fill the mask
Maintain the boundaries of the shape and trigger mouse envents only over the fill respecting the mask (hover the transparent hexagon in the example).
Original example with the mask element:
body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-position:center;background-size:cover;}
svg{
display: block;
width: 70%;
height: auto;
margin: 0 auto;
}
<svg viewbox="-10 -2 30 14" >
<defs>
<mask id="mask" x="0" y="0" width="10" height="10">
<rect x="-10" y="-2" width="40" height="16" fill="#fff"/>
<polygon points="2.5 0.66 7.5 0.66 10 5 7.5 9.33 2.5 9.33 0 5" />
</mask>
</defs>
<rect x="-10" y="-5" width="30" height="20" mask="url(#mask)" fill="#E3DFD2"/>
</svg>
This type of shape can be achieved by filling the outer part of the hexagon using elements. Different transform:rotate(xdeg) should be applied to each element to achieve this effect.
Here is a snippet creating this effect.
Note: The below snippet is supposed to be responsive, so if it appears broken, see the one below it.
* {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
background: url('https://placeimg.com/800/600/any');
background-size: cover;
background-attachment: fixed;
}
.container {
width: 50%;
height: 50%;
position: relative;
margin: 0 auto;
overflow: hidden;
border: 10px solid #009688;
}
.cut:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 0% 100%;
transform: rotate(-60deg);
top: 0;
}
.cut:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 0% 0%;
transform: rotate(60deg);
top: 0;
}
.container:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 100% 0%;
transform: rotate(-60deg);
top: 0;
}
.container:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 100% 100%;
transform: rotate(60deg);
top: 0;
}
<div class="container">
<div class="cut"></div>
</div>
With fixed height and width (better viewed in full screen):
* {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
background: url('https://placeimg.com/800/600/any');
background-size: cover;
background-attachment: fixed;
}
.container {
width: 500px;
height: 300px;
position: relative;
margin: 0 auto;
overflow: hidden;
border: 10px solid #009688;
}
.cut:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 0% 100%;
transform: rotate(-60deg);
top: 0;
}
.cut:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 0% 0%;
transform: rotate(60deg);
top: 0;
}
.container:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 100% 0%;
transform: rotate(-60deg);
top: 0;
}
.container:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: #009688;
transform-origin: 100% 100%;
transform: rotate(60deg);
top: 0;
}
<div class="container">
<div class="cut"></div>
</div>
This is how the cut-out hexagon works:
SVG is the best tool for such things and the biggest contributing factor towards that is that it is easier to create and maintain such shapes as SVG.
But these can be done with CSS transform in another way with simpler transforms also. All we need to do is make use of skew transform and set skew angle based on the shape that is required.
For hexagons, the angle between each side is 120 degrees and so the elements have to be skewed by +/- 30 degrees. For pentagons, the angle between each side is 108 degrees and so skew angles on the bottom half would be +/- 18 degrees but the top half would have +/- 36 degrees. For diamond, the angle between each side is 90 degrees and so the skew angles would be +/-45 degrees.
A few positive points of this approach are: (not that SVG doesn't have these)
The shapes created using this approach are responsive (try hovering on the shapes in demo)
Transforms are pretty well supported given that IE8 is on the way out (Microsoft themselves are stopping support for IE8 from Jan '16). This is not bad when compared with SVG because SVG has the same browser support.
There are quite a few drawbacks of using CSS though:
Extra elements are required in-order to produce the shape.
These would work only in IE9+ (that is, browsers that support transforms). The drawback is not in comparison with SVG but in general.
Fill for the area other than the cut-out cannot be a gradient or an image. It can only be solid color.
Hover effects can be added (as shown in the demo) but it will triggered when the mouse is over the cut-out area also because it is still a part of the container even though it is transparent.
.shape {
position: relative;
height: 100px;
border: 20px solid palevioletred;
overflow: hidden;
}
.shape.hexagon {
width: calc(100px + (100px * 0.577)); /* width = height + (height * tan 30) for hexagon */
}
.shape.pentagon {
width: calc(100px * 1.051); /* width = height * 1.618/1.539 for pentagon (Source: Wiki - https://en.wikipedia.org/wiki/Pentagon */
}
.shape.diamond {
width: 100px; /* height = width for diamond */
}
.hexagon .inner, .pentagon .inner, .diamond .inner {
position: absolute;
height: 100%;
width: 50%;
top: 0px;
left: 85%;
}
.diamond .inner {
left: 100%;
}
.shape:after, .shape:before {
position: absolute;
content: '';
height: 50%;
width: 50%;
left: -35%;
background: palevioletred;
}
.shape.diamond:before, .shape.diamond:after {
left: -50%;
}
.hexagon .inner:after, .hexagon .inner:before, .pentagon .inner:after,
.pentagon .inner:before, .diamond .inner:after, .diamond .inner:before {
position: absolute;
content: '';
height: 50%;
width: 100%;
left: 0px;
background: palevioletred;
}
.shape.hexagon:before, .hexagon .inner:after {
transform: skew(-30deg);
}
.shape.hexagon:after, .hexagon .inner:before {
transform: skew(30deg);
}
.shape.pentagon:before {
transform: skew(-36deg);
}
.shape.pentagon:after{
transform: skew(18deg);
}
.shape.diamond:before, .diamond .inner:after {
transform: skew(-45deg);
}
.shape.diamond:after, .diamond .inner:before {
transform: skew(45deg);
}
.pentagon .inner:before {
transform: skew(36deg);
}
.pentagon .inner:after {
transform: skew(-18deg);
}
.shape:before, .inner:before {
top: 0px;
transform-origin: right bottom;
}
.shape:after, .inner:after {
bottom: 0px;
transform-origin: right top;
}
/* just for demonstrating responsiveness */
.shape {
float: left;
margin: 10px;
transition: all 1s linear;
}
.shape:hover{ height: 150px; }
.shape.hexagon:hover { width: calc(150px + (150px * 0.577)); }
.shape.pentagon:hover { width: calc(150px * 1.051); }
.shape.diamond:hover { width: 150px; }
body {
background: url(http://lorempixel.com/500/500/nature/6) fixed;
background-size: cover;
}
<div class='shape hexagon'>
<div class='inner'></div>
</div>
<div class='shape pentagon'>
<div class='inner'></div>
</div>
<div class='shape diamond'>
<div class='inner'></div>
</div>
The SVG approach is obviously good! But I tried getting it done via CSS! Somehow I managed to get it till here...
* {
box-sizing: border-box;
margin: 0;
padding: 0
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
body {
background: url('http://lorempicsum.com/up/627/300/4') no-repeat top left;
background-size: cover;
padding-top: 10%;
}
.parent {
margin: 0 auto;
display: table;
width: 400px;
height: 230px;
text-align: center;
table-layout: fixed;
}
.orange {
display: table-cell;
vertical-align: middle;
background: transparent;
width: 100%;
height: 230px;
margin: 0 auto;
overflow: hidden;
position: relative;
border-left: 137px solid orange;
border-right: 137px solid orange;
}
.one,
.two {
position: relative;
width: 126px;
height: auto;
display: block;
border-left: 28px solid orange;
border-right: 28px solid orange;
margin: 0 auto;
}
.one {
border-top: 60px solid transparent;
border-bottom: 60px solid orange;
}
.two {
border-top: 60px solid orange;
border-bottom: 60px solid transparent;
}
<div class="parent">
<div class="orange">
<div class="two"></div>
<div class="one"></div>
</div>
</div>
This answer illustrates the costs of using only one element
SVG is the tool for this. Any CSS alternative will probably be very hacky and quirky, so I say the best is to use SVG.
Using CSS
Properties used are:
box-shadows (for color around transparent region)
perspective transforms, rotation
overflow hidden
pseudoelement
body {
background:url('http://i.imgur.com/TYP4Xka.jpg');
}
#box {
height: 400px;
width: 400px;
position: relative;
box-shadow: inset 70px 0 0 #444, inset -70px 0 0 #444, inset 0 0 0 50px #444;
overflow: hidden;
}
#box:before {
content: "";
position: absolute;
height: 150px;
width: 259.8px; /* w = h * sqrt(3) bcoz w = 2*h*cos(30deg) */
top: 125px; /* (parentHeight - pseudoHeight)/2 */
left: 70.1px; /* (parentWidth - pseudoWidth)/2 */
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
box-shadow: 70px 0 0 #444, -70px 0 0 #444;
}
#box:after {
content: "";
position: absolute;
height: 150px;
width: 259.8px;
top: 125px;
left: 70.1px;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
transform: rotate(120deg);
box-shadow: 70px 0 0 #444, -70px 0 0 #444;
}
<div id="box"></div>
NOTE
You can also kind off morph the shape around in an animation, but be warned. Do not use a lot of box-shadows for anything, especially for animation. Box- shadow has a very high CPU usage.
I'm looking for a way to stack divs, with a pointer leading into the next div that is a continuation of the previous div's background image.
I've looked around and I've seen some options, but in all of them the bottom div has to be a solid color.
For example: http://jsfiddle.net/nhqKb/
#container{
height: 300px;
background: url('http://farm8.staticflickr.com/7358/9532233404_58763bd668_b.jpg') no-repeat;
position: relative;
}
#one {
position: absolute;
width: 100px;
left: 0;
bottom: 0;
border-bottom: 20px solid green;
border-right: 20px solid transparent;
}
#two {
position: absolute;
left: 120px;
bottom: 0;
right: 0;
border-bottom: 20px solid green;
border-left: 20px solid transparent;
}
<div id="container">
<div id="one"></div>
<div id="two"></div>
</div>
Is there any way to implement this using divs with background images instead of solid colors?
You can use skewX and pseudo elements to make this.
#container {
background: url('https://images.unsplash.com/photo-1440635592348-167b1b30296f?ixlib=rb-0.3.5&q=80&fm=jpg&w=1080&fit=max&s=a029f986631f264fdbc8c0272cab9c40') no-repeat;
height: 300px;
position: relative;
overflow: hidden;
}
#one {
background-color: rgba(0, 0, 0, 0.3);
bottom: 0;
left: 0;
padding-bottom: 15px;
position: absolute;
width: 100%;
}
#one:before,
#one:after {
background-color: inherit;
bottom: 100%;
content: '';
padding-bottom: inherit;
position: absolute;
width: 50%;
}
#one:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
#one:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
HTML code:
<div id="container">
<div id="one"></div>
</div>
I am currently attempting to create a two SVG overlay / masking like the image below
I have created a Svg for the overlay. As it stands i am trying to create two elements one for the green side and one for the blue side.
I have almost achieve the effect using the clip css property it seems to be working however i have noticed when i decrease the screen size both SVG masks overlay each other and i lose the effect.
Also i not 100% sure about the css property transform: rotate; as I want to add text inside each div
For what i am trying to achieve is this the best approach, if it not what is?
Below is a snippet of my code, i have also added a link below with my code.
.hero-overlay {
position: absolute;
top: 0;
height: 100%;
width: 100%;
-webkit-mask: url("https://dl.dropboxusercontent.com/u/58412455/circle-mask.svg") no-repeat center center;
mask: url("https://dl.dropboxusercontent.com/u/58412455/circle-mask.svg") no-repeat center center;
clip: rect(0px, 580px, 500px, 0px); }
.mask-left {
background-color: red; }
.mask-right {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
background-color: blue; }
http://jsfiddle.net/newkidontheblock/72dL79bd/
You can also use css to achieve this using box-shadow
.container {
background: url(https://unsplash.imgix.net/photo-1425036458755-dc303a604201?q=75&fm=jpg&w=1080&fit=max&s=d8d14b1bb37691447e6cf7d4f5a16112) no-repeat;
position: Relative;
width: 100%;
height: 300px;
background-size: cover
}
.left,
.right {
position: absolute;
width: 49.5%;
left: 0;
height: 100%;
background: transparent;
overflow: hidden;
}
.right {
right: 0;
left: auto;
}
.left:before,
.right:before {
content: '';
background: transparent;
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
top: 50%;
transform: translatey(-50%);
}
.left:before {
left: calc(100% - 47px);
box-shadow: 0px 0px 0px 391px rgba(0, 170, 177, 0.90)
}
.right:before {
right: calc(100% - 47px);
box-shadow: 0px 0px 0px 391px rgba(0, 179, 220, 0.90);
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
I'm trying in my page to make div be shown over its ::before and ::after CSS selectors, so I'm working to get this result :
but I'm getting this JSFIDDLE
Here is my code :
HTML
<div class="box"></div>
CSS
.box{
width: 350px;
height: 350px;
background: #555;
position: absolute;
top: 50px;
left: 200px;
z-index: 10;
}
.box::before{
content: "";
background: #A60000;
width: 300px;
height: 300px;
position: absolute;
top: 25px;
left: -150px;
z-index: 1;
}
.box::after{
content: "";
background: #02047A;
width: 300px;
height: 300px;
position: absolute;
top: 25px;
left: 200px;
margin: auto;
z-index: 1;
}
I know it looks like making div shown over its content because Chrome is showing me the HTML source like this :
but I hope there is a way to fix that ..
Thanks in advance ...
Change your css to follow:
.box{
width: 350px;
height: 350px;
background: #555;
position: absolute;
top: 50px;
left: 200px;
}
.box::before{
content: "";
background: #A60000;
width: 300px;
height: 300px;
position: absolute;
top: 25px;
left: -150px;
z-index: -1;
}
.box::after{
content: "";
background: #02047A;
width: 300px;
height: 300px;
position: absolute;
top: 25px;
left: 200px;
margin: auto;
z-index: -1;
}
fiddle
All you have to do is to set z-index :after and :before to -1 and remove from .box z-index.
Add or replace the properties below (to make :before and :after elements display behind .box apply z-index:-1 and use default z-index for .box) :
.box{
position: absolute;
}
.box::before{
z-index: -1;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.box::after{
z-index: -1;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
JSFiddle