I have an issue but can't find where I made a mistake...
I made an little animation using transform in CSS as you can see on the code.
But sometimes when I hover the mouse the animation becomes crazy. I feel like it occurs often when I hover from bottom left to right.Wonder is you can see it.
Can you help me fix it please ?
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
background: #ccc;
}
.container{
width: 400px;
margin: 0 auto;
margin-top: 200px;
position: relative;
}
.carre{
float: right;
width: 200px;
height: 300px;
position: relative;
background-color: #63aace;
border: 3px solid #f9f9f9;
border-radius: 10px;
transform-style: preserve-3d;
transition: all ease 1s;
box-shadow: 0px 0px 20px rgba(0,0,0,.5);
}
.carre__front{
position: absolute;
width: 180px;
height: 200px;
left: 7px;
top: 50px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: #c65d5d;
transform-style: preserve-3d;
transition: all ease 1s;
transform: scale(1);
opacity: .9;
}
.carre__tippy{
position: absolute;
width: 100px;
height: 60px;
left: 47px;
bottom: 70px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: rgba(255,255,255,.2);
transform-style: preserve-3d;
transition: all ease 1s;
opacity: .9;
}
.description{
position: absolute;
top: 100px;
left: 0px;
font-family: sans-serif;
color: #fff;
font-size: 16px;
opacity: .9;
text-transform: uppercase;
}
.carre:hover{
transform: perspective(1000px) rotateX(30deg) rotateY(20deg) rotateZ(-20deg) translateX(0) translateY(0) translateZ(100px);
box-shadow: -100px 100px 100px rgba(0,0,0,.3);
}
.carre:hover .carre__front{
transform: translateZ(50px);
box-shadow: -20px 20px 30px rgba(0,0,0,.3);
opacity: .7;
}
.carre:hover .carre__tippy{
transform: perspective(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(120px);
box-shadow: -50px 50px 20px rgba(0,0,0,.3);
}
p{
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- En-tête de la page -->
<meta charset="utf-8" />
<title>titre</title>
</head>
<body>
<div class="container">
<div class="carre">
<div class="carre__front">
</div>
<div class="carre__tippy">
</div>
</div>
<div class="description"><p>Information display</p></div>
</div>
</body>
</html>
It has to do with the perspective. You have to set it on the parent (so perspective: 1000px; inside .container) and remove the others.
It might still 'flicker' a bit since it's transforming and calculating if your mouse is still hovering the element. (When it moves, the elements actually move out from underneath the mouse's position sometimes and then the :hover rules don't apply and the transforms reverse, coming back under the mouse triggering :hover, and so on..)
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
background: #ccc;
}
.container{
width: 400px;
margin: 0 auto;
margin-top: 200px;
position: relative;
perspective: 1000px;
}
.carre{
float: right;
width: 200px;
height: 300px;
position: relative;
background-color: #63aace;
border: 3px solid #f9f9f9;
border-radius: 10px;
transform-style: preserve-3d;
transition: all ease 1s;
box-shadow: 0px 0px 20px rgba(0,0,0,.5);
}
.carre__front{
position: absolute;
width: 180px;
height: 200px;
left: 7px;
top: 50px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: #c65d5d;
transform-style: preserve-3d;
transition: all ease 1s;
transform: scale(1);
opacity: .9;
}
.carre__tippy{
position: absolute;
width: 100px;
height: 60px;
left: 47px;
bottom: 70px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: rgba(255,255,255,.2);
transform-style: preserve-3d;
transition: all ease 1s;
opacity: .9;
}
.description{
position: absolute;
top: 100px;
left: 0px;
font-family: sans-serif;
color: #fff;
font-size: 16px;
opacity: .9;
text-transform: uppercase;
}
.carre:hover{
transform: rotateX(30deg) rotateY(20deg) rotateZ(-20deg) translateX(0) translateY(0) translateZ(100px);
box-shadow: -100px 100px 100px rgba(0,0,0,.3);
}
.carre:hover .carre__front{
transform: translateZ(50px);
box-shadow: -20px 20px 30px rgba(0,0,0,.3);
opacity: .7;
}
.carre:hover .carre__tippy{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(120px);
box-shadow: -50px 50px 20px rgba(0,0,0,.3);
}
p{
margin: 0;
padding: 0;
}
<div class="container">
<div class="carre">
<div class="carre__front"></div>
<div class="carre__tippy"></div>
</div>
<div class="description"><p>Information display</p></div>
</div>
Remove perspective from all the transformations and place it on the container (not on hover).
"When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself."
In your case the parent element is ".container" since you're applying some transformations to ".carre" too.
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
background: #ccc;
}
.container{
width: 400px;
margin: 0 auto;
margin-top: 200px;
position: relative;
perspective: 1000px;
}
.carre{
float: right;
width: 200px;
height: 300px;
position: relative;
background-color: #63aace;
border: 3px solid #f9f9f9;
border-radius: 10px;
transform-style: preserve-3d;
transition: all ease 1s;
box-shadow: 0px 0px 20px rgba(0,0,0,.5);
}
.carre__front{
position: absolute;
width: 180px;
height: 200px;
left: 7px;
top: 50px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: #c65d5d;
transform-style: preserve-3d;
transition: all ease 1s;
transform: scale(1);
opacity: .9;
}
.carre__tippy{
position: absolute;
width: 100px;
height: 60px;
left: 47px;
bottom: 70px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: rgba(255,255,255,.2);
transform-style: preserve-3d;
transition: all ease 1s;
opacity: .9;
}
.description{
position: absolute;
top: 100px;
left: 0px;
font-family: sans-serif;
color: #fff;
font-size: 16px;
opacity: .9;
text-transform: uppercase;
}
.carre:hover{
transform: rotateX(30deg) rotateY(20deg) rotateZ(-20deg) translateX(0) translateY(0) translateZ(100px);
box-shadow: -100px 100px 100px rgba(0,0,0,.3);
}
.carre:hover .carre__front{
transform: translateZ(50px);
box-shadow: -20px 20px 30px rgba(0,0,0,.3);
opacity: .7;
}
.carre:hover .carre__tippy{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(120px);
box-shadow: -50px 50px 20px rgba(0,0,0,.3);
}
p{
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- En-tête de la page -->
<meta charset="utf-8" />
<title>titre</title>
</head>
<body>
<div class="container">
<div class="carre">
<div class="carre__front">
</div>
<div class="carre__tippy">
</div>
</div>
<div class="description"><p>Information display</p></div>
</div>
</body>
</html>
Remove all your perspective out of the :hover in css. It'll work.
.carre:hover{
transform: rotateX(30deg) rotateY(20deg) rotateZ(-20deg) translateX(0)
translateY(0) translateZ(100px);
box-shadow: -100px 100px 100px rgba(0,0,0,.3);
.carre__tippy{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(120px);
box-shadow: -50px 50px 20px rgba(0,0,0,.3);
}
.carre__front{
transform: translateZ(50px);
box-shadow: -20px 20px 30px rgba(0,0,0,.3);
opacity: .7;
}
}
Here I nested all your css together for track keeping a little easier
Edit: I meant SCSS file not CSS.
Related
Hello I'm trying to make a bubble widget but I'm having problems basically I need one on top of the other like this:
but I'm not able to do anything like that
can anybody help me?
code:
export default function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<div className="WrapperChat">
<div class="bubble" />
<div class="bubble2 b2" />
</div>
</div>
);
}
css:
.App {
font-family: sans-serif;
text-align: center;
}
body {
margin: 0;
padding: 0;
}
.WrapperChat {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background: blue;
}
.bubble {
background-color: #000;
border-radius: 50px;
box-shadow: 0px 0px 6px #fff;
height: 60px;
margin: 20px;
width: 60px;
}
.bubble::after {
background-color: #f2f2f2;
box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.4);
content: "\00a0";
display: block;
height: 10px;
left: -10px;
position: relative;
bottom: -50px;
transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 20px;
}
.bubble2 {
background-color: #000;
border-radius: 50px;
box-shadow: 0px 0px 6px #fff;
height: 80px;
margin: 20px;
width: 80px;
}
.bubble2::after {
background-color: #f2f2f2;
box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.4);
content: "\00a0";
display: block;
height: 10px;
right: -60px;
position: relative;
top: 70px;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 20px;
}
.b2 {
transform: translateY(-40%);
}
Basically I am not able to position correctly using the translate and I cannot imagine how to make this cut of the arrow of the ballon
example:
https://codesandbox.io/s/sharp-haslett-tr09n
You can set position: absolute in each bubble element to handle with z-index
.bubble {
background-color: #000;
border-radius: 50px;
box-shadow: 0px 0px 6px #fff;
height: 60px;
margin: 20px;
width: 60px;
**position: absolute;
z-index: 1;**
}
and after add position: absolute here you can set the top
.bubble2 {
background-color: #000;
border-radius: 50px;
box-shadow: 0px 0px 6px #fff;
height: 80px;
margin: 20px;
width: 80px;
top: 60px;
position: absolute;
}
https://codesandbox.io/s/peaceful-snow-e6j8e
I am trying to add some white dividers between blue and black. Please see the GIF animation below. Please edit my CSS in jsbin to mimic the same animation in the image. I only need CSS version of this animation without SVG or JS.
.spinner {
height:60px;
width:60px;
animation: rotation 10s infinite linear;
border-left:7px solid rgba(0,0,0,1);
border-right:7px solid rgba(0,0,0,1);
border-bottom:7px solid rgba(0,174,239,1);
border-top:7px solid rgba(0,174,239,1);
border-radius: 100%;
}
#keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
http://jsbin.com/ziniwexuwi/edit?html,css,output
Please check the updated code. I hope it works well for you.
.spinner {
height:62px;
width:62px;
border-left:7px solid rgba(0,0,0,1);
border-right:7px solid rgba(0,0,0,1);
border-bottom:7px solid rgba(0,174,239,1);
border-top:7px solid rgba(0,174,239,1);
border-radius: 100%;
border-spacing: 1px;
position: relative;
animation: rotation 1s infinite linear;
}
.spinner span {
height: 7px;
width: 2px;
background: #fff;
position: absolute;
z-index: 1;
}
.spinner .a {
left: 6px;
top:3px;
transform: rotate(-47deg);
}
.spinner .b {
right: 6px;
top:3px;
transform: rotate(47deg);
}
.spinner .c {
left: 6px;
bottom: 3px;
transform: rotate(47deg);
}
.spinner .d {
right: 6px;
bottom: 3px;
transform: rotate(-47deg);
}
#keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
<div class="spinner">
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>
<span class="d"></span>
</div>
Check this for your perfect requirement:
.loaderborder {
position: relative;
display: inline-block;
border: 16px solid #87ceeb;
border-radius: 50%;
border-top: 16px solid #000;
border-right: 16px solid #87ceeb;
border-bottom: 16px solid #000;
width: 100px;
height: 100px;
-webkit-animation: loaderborder 2.5s linear infinite;
animation: loaderborder 2.5s linear infinite;
}
.loaderborder:before{
content: '';
border-left: 16px solid #fff;
width: 0;
height: 9px;
border-radius: 0%;
display: inline-block;
transform: rotate(50deg);
}
.loaderborder:after{
content: '';
border-right: 16px solid #fff;
width: 0;
height: 9px;
border-radius: 0;
display: inline-block;
transform: rotate(-52deg);
position: absolute;
right: 0;
top: 5px;
}
.loaderborder span{
display: inline-block;
}
.loaderborder span:before{
content: '';
border-top: 16px solid #fff;
width: 10px;
height: 9px;
border-radius: 0%;
display: inline-block;
transform: rotate(50deg);
position: absolute;
z-index: 999;
top: 78px;
left: -2px;
}
.loaderborder span:after{
content: '';
border-bottom: 16px solid #fff;
width: 9px;
height: 9px;
border-radius: 0;
display: inline-block;
transform: rotate(-52deg);
position: absolute;
z-index: 9999;
top: 73px;
left: 85px;
}
#-webkit-keyframes loaderborder {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes loaderborder {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<div class="loaderborder"><span></span></div>
You can also check this Fiddle
I know some people are able to draw anything with css. I can't figure out how to make this shape.
This is what I have as far as now
#adobe {
height: 250px;
left: 50%;
overflow: hidden;
margin: -125px 0 0 -146px;
top: 25%;
width: 350px;
}
.adobe1 {
background: #db2027 none repeat scroll 0 0;
box-shadow: 4px 13px 14px -14px #eee inset;
height: 203px;
left: 10px;
top: 98px;
transform: skewX(-20deg);
width: 75px;
z-index: 999;
}
.adobe2 {
background: #404140 none repeat scroll 0 0;
height: 259px;
left: 210px;
top: 36px;
transform: skewX(19deg);
width: 75px;
-moz-box-shadow: inset 0 0 3px #eee;
-webkit-box-shadow: inset 0 0 3px #eee;
box-shadow: inset 0 0 3px #eee;
z-index: 999;
}
.adobe3 {
background: #db2027 none repeat scroll 0 0;
height: 68px;
left: 80px;
top: 125px;
transform: skewX(-10deg);
width: 93px;
-moz-box-shadow: inset 0 0 3px #eee;
-webkit-box-shadow: inset 0 0 3px #eee;
box-shadow: inset 0 0 3px #eee;
}
.adobe4 {
background: #404140 none repeat scroll 0 0;
height: 59px;
left: 57px;
top: 36px;
transform: skewX(-15deg);
width: 146px;
-moz-box-shadow: inset 0 0 3px #eee;
-webkit-box-shadow: inset 0 0 3px #eee;
box-shadow: inset 0 0 3px #eee;
}
.icon,
.icon * {
display: block;
position: absolute;
}
.icon,
.icon * {
display: block;
position: absolute;
}
.icon {
top: 35% !important;
}
.half-circle {
width: 350px !important;
height: 334px !important;
background-color: ;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border: 20px solid #db2027;
border-bottom: 20px solid transparent !important;
border-right: 20px solid #db2027 !important;
transform: rotate(-8deg);
}
.half-circle2 {
left: 47px;
right: 31px;
top: -1px;
transform: rotate(9deg);
}
.two {
left: 47px;
right: 31px;
top: -1px;
transform: rotate(9deg);
border-bottom: 20px solid #000 !important;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
width: 350px !important;
height: 334px !important;
background-color: ;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border: 20px solid transparent;
border-bottom: 20px solid #000 !important;
border-right: 20px solid transparent !important;
}
<div id="adobe" class="icon half-circle test">
<div class="two">
<div class="half-circle2">
<div class="adobe1"></div>
<div class="adobe2"></div>
<div class="adobe3"></div>
<div class="adobe4"></div>
</div>
</div>
</div>
Here you go..!! Little tweaks are required, I think you can make it according to your design.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.logo-container{
position: relative;
width: 184px;
height: 184px;
overflow: hidden;
border-radius: 50%;
}
.logo-outer-circle{
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border: 12px solid #db2027;
border-bottom: 12px solid #404140 !important;
border-right: 12px solid #db2027 !important;
width: 160px;
height: 160px;
/*border-radius: 50%;*/
/*overflow: hidden;*/
position: relative;
}
.red-top{
position: absolute;
width: 32px;
height: 90px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
background: #db2027;
left: 20px;
top: 70px;
}
.red-top:before{
position: absolute;
content: '';
width: 21px;
height: 4px;
background-color: #e55a60;
top: 5px;
left: 6px;
}
.red-right{
position: absolute;
width: 60px;
height: 32px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
background: #db2027;
left: 25px;
top: 95px;
}
.red-right:before{
position: absolute;
content: '';
width: 4px;
height: 58px;
background-color: #e55a60;
top: -18px;
}
.grey-top{
position: absolute;
width: 32px;
height: 160px;
-webkit-transform: skew(15deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
background: #404140;
right: 30px;
top: 25px;
}
.grey-top:before{
position: absolute;
content: '';
width: 4px;
height: 117px;
background-color: #4f4f4f;
top: 3px;
left: 5px;
}
.grey-left{
position: absolute;
width: 65px;
height: 32px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
background: #404140;
left: 30px;
top: 25px;
}
.grey-left:before{
position: absolute;
content: '';
width: 4px;
height: 26px;
background-color: #4f4f4f;
top: 3px;
left: 5px;
}
.divider-left{
position: absolute;
content: '';
width: 10px;
height: 20px;
background-color: #fff;
top: 150px;
left: 40px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
}
.divider-right{
position: absolute;
content: '';
width: 10px;
height: 27px;
background-color: #fff;
top: 125px;
right: 11px;
-webkit-transform: skew(15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
}
</style>
</head>
<body>
<div class="logo-container">
<div class="logo-outer-circle">
<div class="red-top"></div>
<div class="red-right"></div>
<div class="divider-left"></div>
<div class="grey-top"></div>
<div class="grey-left"></div>
<div class="divider-right"></div>
</div>
</div>
</body>
</html>
On hovering an image I want to have an inside border (this i have) and zoom the picture inside its size. where do I have to put the overflow:hidden so that the image doesn't get larger ?
.border {
display: inline-block;
position: relative;
max-width: 495px;
max-height: 369px;
overflow: hidden;
}
.border::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: inset 0 0 0 5 rgba(255, 255, 255, .5);
transition: box-shadow .1s ease;
}
.border:hover::after {
box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .5);
}
.text {
font-size: 48px;
color: #FFF;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
position: absolute;
margin: auto;
top: 40%;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
text-align: center;
}
.border img {
max-width: 495px
}
.zoomzoom {
transition: all 2s;
}
.zoomzoom:hover {
transform: scale(1.1);
}
<div class="border zoomzoom">
<a href="http://www.google.com"><h2 class="text">Sunny</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Great_Hall_-_Parliament_of_Australia.jpg/800px-Great_Hall_-_Parliament_of_Australia.jpg"></a></div>
This code should work.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.border {
position: relative;
border: 1px solid #333;
margin: 2%;
overflow: hidden;
max-width: 495px;
max-height: 369px;
}
.text {
font-size: 48px;
color: #FFF;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
position: absolute;
margin: auto;
top: 40%;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
text-align: center;
}
.border img {
max-width: 100%;
-moz-transition: all 2s;
-webkit-transition: all 2s;
transition: all 2s;
}
.zoomzoom:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<div class="border zoomzoom">
<a href="http://www.google.com"><h2 class="text">Sunny</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Great_Hall_-_Parliament_of_Australia.jpg/800px-Great_Hall_-_Parliament_of_Australia.jpg"></a>
</div>
I got the answer
h2{
font-size:48px;
color:#FFF;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
position:absolute;
z-index:2;
top:50%;
left:50%;
transform:translate(-50%, -50%);
margin:0;
}
.border{
width:350px;
height:250px;
display:inline-block;
position:relative;
z-index:3;
overflow:hidden;
text-decoration:none;
}
.border:after{
content:'';
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
box-shadow: inset 0 0 0 0 rgba(255,255,255,.5);
transition: box-shadow .1s ease;
}
.border:hover:after{
box-shadow: inset 0 0 0 10px rgba(255,255,255,.5);
}
.border img{
width:100%;
height:100%;
opacity:1;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
transition:width .25s ease, height .25s ease, opacity .25s ease;
}
.border:hover img{
width: 400px;
height: 300px;
opacity:.7;
}
<div class="border zoomzoom">
<a href="http://www.google.com"><h2 class="text">Sunny</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Great_Hall_-_Parliament_of_Australia.jpg/800px-Great_Hall_-_Parliament_of_Australia.jpg" class="SpecialZoom" /></a></div>
I'm playing around trying to draw a simple folder icon with CSS, and this is where I'm at:
/* CSS */
.container {
border: solid 1px #000;
width: 100px;
height: 100px;
padding: 5px;
text-align: center;
}
.folder_tab, .folder {
margin: 0 auto;
background-color: #708090;
}
.folder_tab {
width: 25px;
height: 5px;
margin-right: 50%;
border-radius: 5px 15px 0 0;
}
.folder {
width: 50px;
height: 35px;
border-radius: 0 5px 5px 5px;
box-shadow: 1px 1px 0 1px #CCCCCC;
}
<!-- HTML -->
<div class="container">
<div class="folder_tab"></div>
<div class="folder"></div>
text
</div>
Result:
Is there a simpler, or more elegant way to do this?
This is my solution, if you want to use CSS3.
HTML
<div class="folder"></div>
CSS
.folder {
width: 150px;
height: 105px;
margin: 0 auto;
margin-top: 50px;
position: relative;
background-color: #708090;
border-radius: 0 6px 6px 6px;
box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.59);
}
.folder:before {
content: '';
width: 50%;
height: 12px;
border-radius: 0 20px 0 0;
background-color: #708090;
position: absolute;
top: -12px;
left: 0px;
}
DEMO (tested in Chrome)
I know this thread is a bit old, but I bounced into this question by asking myself if there was something simple in pure CSS and minimalistic HTML to update my old tree library which uses background images for icons.
I tried by myself and I came up with something in line with the flat design which today is revolutioning cross-devices UI's:
https://jsfiddle.net/landzup/Lzjadp5r/
It is just a suggestion or a starting point, but it is amazing watching the page not losing a single pixel of resolution by zooming in as much as possible! (Just like vector graphics).
I used a brief HTML:
<div class="folder">
<div class="icon"></div>
Programming
</div>
And this is the CSS:
<style type="text/css">
.folder {
display: block;
position: relative;
top: 0;
left: 0;
margin: 18px 0;
font: 18px helvetica, arial, sans-serif;
text-indent: 27px;
line-height: 34px;
}
.folder .icon {
content: "";
display: block;
float: left;
position: relative;
top: 0;
left: 0;
width: 30px;
height: 30px;
border: 2px solid #999;
background: #ddd;
-moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px;
-moz-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
-webkit-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
-o-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
-ms-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg);
}
.folder .icon::after {
content: "";
display: block;
position: relative;
top: 7px;
left: -6px;
width: 30px; height: 21px;
border: 2px solid #999;
background: #ddd;
-moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px;
-moz-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
-webkit-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
-o-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
-ms-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg);
}
</style>
It uses CSS 3 transformations, so you should consider your target audience to support its browsers.
Here there are CSS compatibility tables for CSS transformation:
http://caniuse.com/#feat=transforms2d
Here is my solution:
http://jsfiddle.net/wQdgs/
HTML
<div>text</div>
CSS
div {
width: 100px;
height: 50px;
padding-top: 50px;
border: solid 1px #000;
position: relative;
text-align: center;
}
div:after {
content: " ";
width: 50px;
height: 35px;
border-radius: 0 5px 5px 5px;
box-shadow: 1px 1px 0 1px #CCCCCC;
display: block;
background-color: #708090;
position: absolute;
top: 15px;
left: 25px;
}
div:before {
content: " ";
width: 25px;
height: 5px;
border-radius: 5px 15px 0 0;
display: block;
background-color: #708090;
position: absolute;
top: 10px;
left: 25px;
}