Border effect to let a picture stand out? - html

I'm looking for a special CSS (3?) border effect: when applied, it looked like the corners of the objects stand out a bit more then the middle of the sides. Which produces a nice effect as if a piece of paper would be lying on the website.
How do you call this effect?


This page contains a good looking "bent paper" shadow effect, with pure CSS:
http://matthamm.com/box-shadow-curl.html
Sample code for the shadow effect on <li> element from the source above:
HTML:
<ul class="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS:
ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }
ul.box li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }
ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }
ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }
Note: If you are using a parent element. Make sure that the parent div has position: relative; z-index: 99; or those shadows won’t show up.


You can do this with CSS3 box-shadow and transforms. E.g.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div {
width: 215px;
height: 80px;
border: 1px solid #ccc;
position: relative;
background: white;
}
div::before, div::after {
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
position: absolute;
left: 10px;
bottom: 12px;
z-index: -1;
width: 50%;
max-width: 100px;
height: 20px;
content: "";
}
div::after {
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
http://codepen.io/anon/pen/JuwLd


You can do this with a little trick of setting the border width to different sizes. For example:
div{
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 2px solid black;
border-right: 2px solid black;
width: 200px;
height: 400px;
}
Example
Don't know how this is called, though.

Related

Issue with overflow:hidden with transform:skewY

I'm having an issue where overflow:hidden doesn't seem to be working on a skewed container. I have an issue that requires a box shadow on the outer container with an inner image that extends to the top and bottom of the outer container.
For some reason placing the overflow:hidden on the .skew-container doesn't seem to be hiding the top of the image as expected.
.skew-container {
position: relative;
}
.skew-container:before {
-webkit-transform: skewY(-2.3deg);
-moz-transform: skewY(-2.3deg);
-ms-transform: skewY(-2.3deg);
-o-transform: skewY(-2.3deg);
transform: skewY(-2.3deg);
position: absolute;
outline: 1px solid transparent;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
top: 0;
content: "";
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
.skew-container:after {
content: "";
display: block;
position: relative;
z-index: 3;
left: 0;
right: 0;
bottom: 5px;
height: 10px;
outline: 1px solid transparent;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: rotate(-2.3deg);
-webkit-box-shadow: inset 0px -9px 29px -13px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0px -9px 29px -13px rgba(0, 0, 0, 0.75);
box-shadow: inset 0px -9px 29px -13px rgba(0, 0, 0, 0.75);
}
.level-container {
background-color: green;
}
I have attached a jsfiddle below:
https://jsfiddle.net/eilawen/yy7pL7by/
If anyone could provide any solutions or alternative solutions to the issue it would be appreciated. I have tried using clip-path but unfortunately came across issues applying a box shadow along with positioning the skewed containers right next to each other on the top and bottom.
Thanks in advance.

Css box shadow moving to the top and left

CSS & Html:
body {background:#ccc}
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
.effect3
{
position: relative;
}
.effect3:before
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
<div class="box effect3">
<h3>Effect 3</h3>
</div>
I am trying to decorate a box with a shadow.
The above css is for the shadow bottom and left (in the red circle).
What can be the css to apply to the top and left (red arrow)?

Please use these code for top left box-shadow:
.effect3:before {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 3px;
width: 18%;
top: 24px;
max-width: 300px;
background: #777;
-webkit-box-shadow: -8px 15px 10px #777;
-moz-box-shadow: -8px 15px 10px #777;
-webkit-transform: rotate(87deg);
-moz-transform: rotate(87deg);
transform: rotate(87deg);
}

body {
background: #ccc
}
.box h3 {
text-align: center;
position: relative;
top: 80px;
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
.effect3 {
position: relative;
}
.effect3:before {
z-index: -1;
position: absolute;
content: "";
left: -46px;
width: 20%;
bottom: 15px;
top: 25%;
max-width: 300px;
height: 20px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: -10px -5px 10px #777;
-webkit-transform: rotate(-93deg);
-moz-transform: rotate(-93deg);
-o-transform: rotate(-93deg);
-ms-transform: rotate(-93deg);
transform: rotate(-93deg);
}
I think this is what you asking...

-webkit-box-shadow: -6px -8px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -6px -8px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: -6px -8px 5px 0px rgba(50, 50, 50, 0.75);
Generated using http://css3gen.com/box-shadow/

Use an after and changing the before like so:
.effect3:before {
z-index: -1;
position: absolute;
content: "";
left: 15px;
width: 50%;
bottom: 15px;
top: 4%;
max-width: 300px;
height: 20px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: -10px -5px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(3deg);
}
.effect3:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
Here is the JSFiddle demo

Link hover not working - CSS

I'm trying to scale a box by hovering over it but doesn't seem to be working. Can I style the href to scale when hovering over?
Got the code I'm using below as well as a jsfiddle:
https://jsfiddle.net/695e7ca9/
HTML:
<div class="window">
<div class="col">
<a href="google.com" class="box">
<span class="title-label">window title </span>
<span class="content"></span>
</a>
</div>
</div>
CSS:
.col {
max-width: 50%;
}
.title-label {
display: block;
padding: 20px;
margin-bottom: 0;
color: #fff;
font-weight: 700;
background: #0176ff;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px;
border-radius: 4px 4px 0 0;
}
.content {
margin-top: -1px;
box-shadow: inset 0 0 0 1px #0176ff;
border-top: 0;
padding: 25px;
min-height: 235px;
display: block;
}
.window .col .box:hover {
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
-moz-box-shadow: 0 0 49px rgba(0, 0, 0, .06);
-webkit-box-shadow: 0 0 49px rgba(0, 0, 0, .06);
box-shadow: 0 0 49px rgba(0, 0, 0, .06);
}

It doesn't work because it's an <a>, an inline element.
You need to add display:block to make it work.
Also I added transition: transform 250ms to add some "smoothness" to the animation.
https://jsfiddle.net/695e7ca9/3/

Is it possible to add box shadowing to inputs in forms css?

I have been trying to add some snazzy effects to my input boxes and one I found was box shadowing, I looked at the w3schools tutorial for box shadowing and tried multiple things to add it to my input box:
.l_input {
box-shadow: 10px;
}
That didn't seem to work for my code. I also tried to use it using a hover pseudo effect and it again didn't work for that, the pseudo code I tried doing:
.l_input {
box-shadow: 5px;
}
.l_input:hover {
box-shadow: 10px;
transition: 2s;
}
And again that didn't seem to work, if this is the right syntax for how the code should work or I am doing a small mistake thanks in advance, I have thought that maybe it isn't supported for inputs, but that sounded weird.

.l_input {
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
transition: 0.3s ease-in-out;
}
/* hover effect */
.l_input:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
<div class="l_input"> Content <div>

You can give box shadow like following way:
.l_input {
box-shadow: 5px 5px 5px #000;
}
You should give at least first two value.
First two describe horizontal shadow and vertical shadow. Third one is blur and color.
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
Reference link:
Working Fiddle
And you can give effect to shadow following way.
.l_input {
box-shadow: 5px 5px 5px #000;
}
.l_input:hover {
box-shadow: 10px 10px 10px #000;
transition: 2s;
}
Fiddle

It should be worked with below code.If your class is .l_input then it will be worked.Its depends on your mark.
.l_input {
box-shadow: 5px 5px 5px #000;
}
If not then try below code:
You can see in JSFIDDLE .
body {
background: #ccc
}
.box h3 {
text-align: center;
position: relative;
top: 80px;
}
.box {
width: 70%;
height: 200px;
background: #FFF;
margin: 40px auto;
}
/*==================================================
* Effect 1
* ===============================================*/
.effect1 {
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
/*==================================================
* Effect 2
* ===============================================*/
.effect2 {
position: relative;
}
.effect2:before,
.effect2:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect2:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
/*==================================================
* Effect 3
* ===============================================*/
.effect3 {
position: relative;
}
.effect3:before {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
/*==================================================
* Effect 4
* ===============================================*/
.effect4 {
position: relative;
}
.effect4:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
right: 10px;
left: auto;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}
/*==================================================
* Effect 5
* ===============================================*/
.effect5 {
position: relative;
}
.effect5:before,
.effect5:after {
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width: 300px;
background: #777;
-webkit-box-shadow: 0 35px 20px #777;
-moz-box-shadow: 0 35px 20px #777;
box-shadow: 0 35px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.effect5:after {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
/*==================================================
* Effect 6
* ===============================================*/
.effect6 {
position: relative;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before,
.effect6:after {
content: "";
position: absolute;
z-index: -1;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
.effect6:after {
right: 10px;
left: auto;
-webkit-transform: skew(8deg) rotate(3deg);
-moz-transform: skew(8deg) rotate(3deg);
-ms-transform: skew(8deg) rotate(3deg);
-o-transform: skew(8deg) rotate(3deg);
transform: skew(8deg) rotate(3deg);
}
/*==================================================
* Effect 7
* ===============================================*/
.effect7 {
position: relative;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before,
.effect7:after {
content: "";
position: absolute;
z-index: -1;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
top: 0;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
.effect7:after {
right: 10px;
left: auto;
-webkit-transform: skew(8deg) rotate(3deg);
-moz-transform: skew(8deg) rotate(3deg);
-ms-transform: skew(8deg) rotate(3deg);
-o-transform: skew(8deg) rotate(3deg);
transform: skew(8deg) rotate(3deg);
}
/*==================================================
* Effect 8
* ===============================================*/
.effect8 {
position: relative;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before,
.effect8:after {
content: "";
position: absolute;
z-index: -1;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
top: 10px;
bottom: 10px;
left: 0;
right: 0;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
}
.effect8:after {
right: 10px;
left: auto;
-webkit-transform: skew(8deg) rotate(3deg);
-moz-transform: skew(8deg) rotate(3deg);
-ms-transform: skew(8deg) rotate(3deg);
-o-transform: skew(8deg) rotate(3deg);
transform: skew(8deg) rotate(3deg);
}
<div class="box effect1">
<h3>Effect 1</h3>
</div>
<div class="box effect2">
<h3>Effect 2</h3>
</div>
<div class="box effect3">
<h3>Effect 3</h3>
</div>
<div class="box effect4">
<h3>Effect 4</h3>
</div>
<div class="box effect5">
<h3>Effect 5</h3>
</div>
<div class="box effect6">
<h3>Effect 6</h3>
</div>
<div class="box effect7">
<h3>Effect 7</h3>
</div>
<div class="box effect8">
<h3>Effect 8</h3>
</div>

Try This
.l_input {
box-shadow: 3px 3px 2px #666;
transition: 0.2s all linear;
border:1px solid #999;
}
.l_input:hover {
box-shadow: 0 5px 15px #666;
transition: 0.2s all linear;
}
<input type="text" class="l_input">

Create arc button as shown in the image link

arc button
i want to create an arc button like shown in the link . is it possible with css
i have tried the following code but i wanted to remove the white portion at the bottom of it so that it may look like an arc as shown in the image
thankyou
nav {
width: 400px;
height: 400px;
background: transparent;
border-radius: 50%;
padding: 20px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.button {
display: block;
width: 30%;
height: 30%;
margin: 2%;
position: relative;
float: left;
box-shadow: 1px 0px 3px 1px rgba(0, 0, 0, 0.4), inset 0 0 0 1px #FFF;
}
.button::after {
content: "";
display: block;
width: 50%;
height: 50%;
background: transparent;
position: absolute;
border-radius: inherit;
}
.button.top {
border-radius: 100% 0 0 0;
background: -webkit-radial-gradient(bottom right, ellipse cover, #fff 35%, #eee 75%);
background: radial-gradient(ellipse cover at bottom right, #ffffff 35%, #eeeeee 75%);
}
.button.top::after {
bottom: 0;
right: 0;
box-shadow: inset 2px 1px 2px 0 rgba(0, 0, 0, 0.4), 10px 10px 0 10px transparent;
-webkit-transform: skew(-3deg, -3deg) scale(0.96);
-moz-transform: skew(-3deg, -3deg) scale(0.96);
transform: skew(-3deg, -3deg) scale(0.96);
}
<nav>
<a class="button top" href="#"><i class="icon-play"></i></a>
</nav>