I designed this tile with a box-shadow using Figma. The box-shadow is positioned to the top of the tile and centered, 40px in from the left and right side, and 16px in from the bottom. The blur is 48px with an y-offset of 24px. The color is (0,0,0,0.16).
As you haven't provided the dimensions of your tile, I made a tile that follows the box shadow properties that you want (with made-up dimensions):
body {
background:#F1F2F4;
}
#tile {
margin-top:40px;
margin-left:40px;
width:300px;
height:120px;
background:#ffffff;
border-radius:3px;
box-shadow:0px 24px 48px 0 rgba(0,0,0,0.16);
}
<div id="tile"></div>
For more information on the box-shadow property:
https://alligator.io/css/box-shadow/
https://teamtreehouse.com/community/what-is-the-difference-between-spread-and-blur-radius-properties
body {
background:#F1F2F4;
}
#tile {
position: relative;
top: 30px;
left: 30px;
width: 380px;
height: 136px;
background: #ffffff;
border-radius: 2px;
}
#shadow {
position: absolute;
left: 40px;
top: 0px;
z-index: -1;
width: 300px;
height: 120px;
background: #ffffff;
box-shadow: 0px 24px 48px 0 rgba(0,0,0,0.16);
}
<div id="tile">
<div id="shadow"></div>
</div>
Related
I'm coding some fancy stuff for teaching myself.
I have an aslope left corner. Now, i want to add the box shadow and it showed like the following image:
This is my code snippet:
html, body {
margin: 0px;
}
.navbar {
position:relative;
content:"";
border-left: 300em solid #454545;
border-bottom: 120px solid transparent;
z-index: 2;
box-shadow: 0px 8px 23px 4px black;
}
.under-bar {
margin-top: -40px;
background: #851e39;
height: 200px;
opacity: 0.8
}
<html>
<body>
<div class="navbar">
</div>
<div class="under-bar">
</div>
</body>
</html>
Can someone help me to set a box-shadow under the header?
You can use transform: rotate(); instead of the border tricks.
body {
margin: 0;
}
.navbar {
height: 200px;
background-color: #9d4b61;
position: relative;
overflow: hidden;
}
.navbar:before {
content: "";
position: absolute;
left: 0;
top: -50px;
width: 100%;
height: 100px;
box-shadow: 0px 8px 23px 4px #000;
transform: rotate(-1deg);
background-color: #333;
}
.menu {
position: relative;
left: 20px;
top: 20px;
color: #fff;
}
<div class="navbar">
<div class="menu">menu</div>
</div>
You can use a border-radius and transform: scale:
body {
margin: 0;
background: #9d4b61;
}
.navbar {
width: 100%;
height: 50px;
background: #5c5c5c;
border-radius: 0 0 100%/22px 0;
box-shadow: 0px 8px 23px 4px rgba(0,0,0,0.8);
transform: scale(1.1,1);
}
<div class="navbar"></div>
The border-radius: 0 0 100%/22px 0 set a radius in the bottom right corner, which is 100% wide and 22px height, giving the radius a "stretched" look.
The transform: scale(1.1,1) is stretching the entire element, to hide the box-shadow in each side.
I have a little CSS problem.
I sketched the problem here:
http://jsfiddle.net/0g4b23hp/
The css:
a {
padding: 7px 10px 5px 10px;
background: #FF0000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
.bottom-1 {
position: absolute;
bottom: 0;
right: 0;
padding:5px 10px 5px 10px;
}
What I want to achieve is that in all browsers the 2 buttons get across the black border and that the corners have radius 0px; But I don't get it right;
I already tried to make the padding-bottom:50px and overflow:hidden but didn't work.
What I want to achieve is that in all browsers the 2 buttons get across the black border and that the corners have radius 0px;
I think will do what you want.
a {
padding: 7px 10px 5px 10px;
background: #FF0000;
/* REMOVED
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
*/
}
#container {
width: 500px;
height: 250px;
border: 4px solid #000000;
}
.bottom-1 {
position: absolute;
bottom: 0;
right: 0;
padding:5px 10px 5px 10px;
transform:translateY(50%);
}
.container {
position: relative;
}
<body>
<div class="container" id="container">
<div class="bottom-1">
<div class="background2"></div> Action 1
Action 2
</div>
</div>
</body>
I've created a div that contains a box, within that box is text and a link. What I want is when a person hovers over this box with the link, a red line appears on the bottom of the box. At the moment I've managed this but I want the red line to be the width of the grey box and only 5 pixels in height.
#teamspeak_box {
width: 159px;
height: 43px;
background: #212121;
bottom: 82px;
right: 76px;
position: absolute;
border-radius: 0px 0px 5px 5px;
}
#teamspeak_box_2 {
width: 43px;
height: 43px;
background: #313131;
bottom: 82px;
right: 191px;
position: absolute;
border-radius: 0px 0px 0px 5px;
}
#teamspeak_text {
color: white;
bottom: 93px;
right: 66px;
position: absolute;
}
#teamspeak_image {
bottom: 80px;
right: 104px;
position: absolute;
}
#teamspeak_image a:hover {
background-color: #C62828;
transition: all 0.5s ease;
}
<div id="teamspeak_box"></div>
<div id="teamspeak_box_2">
</div>
<div id="teamspeak_text">
<p>TEAMSPEAK
<P/>
</div>
<div id="teamspeak_image">
<a href="ts3server://craft412.serveminecraft.net:9987">
<img src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK">
</a>
</div>
I find your element positioning insane. Try this one
HTML
<a href="ts3server://craft412.serveminecraft.net:9987">
<div class="teamspeak-box">
<div class="teamspeak-icon">
<img src="http://filepic.ru/file/1436899103.png" alt="">
</div>
<p>TEAMSPEAK</p>
</div>
</a>
CSS
.teamspeak-box{
width: 159px;
height: 43px;
background: #212121;
border-radius: 0px 0px 5px 5px;
overflow: hidden;
color: white;
display: table;
}
.teamspeak-icon{
width: 43px;
height: 43px;
background: #313131;
display: table-cell;
transition: all 0.5s ease;
}
.teamspeak-icon img{
width: 100%;
}
.teamspeak-box p{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.teamspeak-box:hover .teamspeak-icon{
-webkit-box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
-moz-box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
}
Run this code on JSFiddle
Basically you want to change the styling on one element while hovering another. This can be done the following way:
#teamspeak_image a:hover ~ #teamspeak_box {
background-color: #C62828;
transition: all 0.5s ease;
}
See this answer for more info. And you might consider adding a border-bottom: 5px solid red; to the box instead of background-color.
In order for the red line to be the width of the grey box and 5px tall,
use the css property to set the display of the grey box to block. Thus, for the grey box use:
display:block;
height:5px;
After that you can set other css properties for the links inside the grey box.
I have two DIVs inside each other. The inner DIV contains an image. I'm trying to add a floating text over that image in the top right corner. I can't figure out how to make that text to use inner DIV's positions instead of the outer one.
Here is what I got so far
CSS:
html {
background: #EEF0F3;
}
.outer {
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin: 0 auto;
padding:20px 0px;
position: relative;
width: 680px;
text-align: center;
margin-bottom: 20px;
}
.inner {
position: relative;
}
h2 {
position: absolute;
top: 0px;
right: 0px;
}
h2 span {
color: white;
font: bold 24px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgba(255, 0, 0, 0.5);
padding: 0px 10px;
}
HTML:
<div class="outer">
<div class="inner">
<h2><span>Title 1</span></h2>
<img src="1.jpg">
</div>
</div>
And here is the code in JSFiddle
http://jsfiddle.net/UM8ea/
If I set positioning to:
h2 {
position: absolute;
top: 20px;
right: -20px;
}
I get the desired result, but that feels like workaround rather than a solution.
Its very simple.
Check this fiddle
.outer {
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin: 0 auto;
padding:20px 0px;
position: relative;
width: 680px;
text-align: center;
margin-bottom: 20px;
}
for h2
h2
{
position: absolute;
top: 5px;
right: 20px;
margin:0;
}
You have this behaviour because .outer is wider than the image, and then, .inner too. The h2 is positioned related to .inner, and go to right.
If you set .outer to have 640px width (as the image) you get the desired result.
Other solution is to set margin: 0 20px; on .inner
If you want the text positioned all top the image you can set h2 {margin:0;} in both cases.
I am trying to achieve this effect where a photo gets a repeating pattern overlayed over the entire photo when the user place his mouse over the photo.
Problem: I do not seem to be able to make the overlay div overlay the photo completely. How should this be done?
JSfiddle: http://jsfiddle.net/KDyKH/2/
Edit: Updated the fiddle
CSS
#container {
position: relative;
padding: 10px;
width: 1000px;
height: 500px;
background: blue;
}
.photo_box {
padding: 8px 10px 11px 10px;
background: #fff;
-webkit-box-shadow: 1px 1px 6px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 1px 1px 6px rgba(50, 50, 50, 0.25);
box-shadow: 1px 1px 6px rgba(50, 50, 50, 0.25);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline-block;
position: relative;
}
.photo {
position: absolute;
z-index: 0;
margin-bottom: 13px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.photo_tint {
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
background: red;
-moz-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
}
HTML
<div id="container">
<div class="photo_box">
<img src='http://www.kurzweilai.net/images/Google-logo.jpg' class="photo">
<div class="photo_tint"></div>
</img>
</div>
</div>
In addition to adding left and top properties to .photo_tint, you also need to make .photo_box relatively positioned (it wasn't before you edited your question).
.photo_box {
position: relative;
}
.photo_tint {
left:0;
right:0;
}
http://jsfiddle.net/KDyKH/5/
The absolute position's left/top/right/bottom attributes work off the last element higher in the hierarchy with position set to relative or absolute. If no parent elements have position set to relative/absolute, the body is used. In your case, the closest relatively positioned element was #container, so when left and top were set on .photo_tint it used #container's origin and not .photo_box's origin as needed to achieve the desired effect.
Additionally, if an element is set to position:absolute, and no left/top/right/right properties are set, the element will not behave as absolute (see this question).
.photo_tint {
position: absolute;
z-index: 100;
background: red;
top:0; left:0;
width:100%; height:100%;
}
???
http://jsfiddle.net/tFbbM/1/
Just position the photo_tint div using top and left. http://jsfiddle.net/OhMrBigshot/gEdJu/
z-index:-1 on the image or z-index:2 on the div
#container {
position: relative;
width: 500px;
height: 500px;
background: blue;
}
.photo {
position: relative;
width: 300px;
height: 100px;
background: green;
}
.photo_tint {
position: absolute;
z-index: 1;
background: red;
width: 300px;
height: 100px;
top:0px;
}