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.
Related
I am working on a service that will be load in front of a video. Here is some basic code that shows the main shape of the service : CodePen link
Here is the code :
HTML
<div class="container">
<div class="sidezone">
<div class="header">
</div>
<div class="tab">
<div class="tab_elt active_tab">Tab 1</div>
<div class="tab_elt">Tab 2</div>
<div class="tab_elt">Tab 3</div>
<div class="tab_elt">Tab 5</div>
</div>
<div class="content">
</div>
</div>
</div>
CSS
.container {
position: relative;
width: 1280;
height: 720px;
margin: auto 50px;
background-color: green;
}
.sidezone {
box-sizing: border-box;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
top: 0; right: 0;
width: 500px;
height: 720px;
padding: 26px 52px 26px 16px;
}
.sidezone:before {
content: '';
position: absolute;
top: 0; left: -50px; bottom: 0;
width: 0;
height: 0;
border-top: 0px solid transparent;
border-bottom: 720px solid transparent;
border-right: 50px solid rgba(0, 0, 0, 0.5);
}
.header {
color: #fff;
background-color: #000;
overflow: hidden;
font-family: o-HelveticaNeue, Helvetica, Arial, sans-serif;
font-weight: 700;
position: relative;
padding: 10px 10px 20px 10px;
margin-bottom: 10px;
height: 200px;
background-repeat: no-repeat;
background-size: cover;
background-image: url("http://lorempixel.com/550/200/sports");
background-position: center top;
}
.tab {
background: #000;
}
.tab_elt {
color: white;
display: inline-block;
width: 24%;
text-align: center;
padding: 4px 0;
margin-bottom: -2px;
}
.active_tab {
color: #f16e00;
border-bottom: 2px solid #f16e00;
}
.content {
height: 419px;
background-color: white;
}
My question is : How can I "fill" the "sidezone" part from the top to the bottom of my "tab" part with a color or a picture in pure CSS ?
I'd like to make something that looks more "natural" but now I feel like my header is just "stick" in my block...
I tried to make it work by cutting my ":before" element in two part : one that could be black as my tab (and my header if I remove the image) that will go from top to the bottom of the "tab", and an other that will start just after and go to the bottom. This way I could keep my current shape and have 2 differents color to do what i want, but can't achieve it...
I insist on the "pure CSS" (no SVG, no lib,...), I'm very limited in possibilities.
Is it possible ?
Edit : here a visual representation of what I try to achieve (sorry for my paint talent !)
Change the borders of your pseudo element to these:
border-top: 294px solid rgba(0, 0, 0, 0.5);
border-left: 20px solid transparent;
border-right: 30px solid rgba(0, 0, 0, 0.5);
You may have to adjust the border widths. But the idea is to draw a trapezium/trapezoid using the borders.
Then remove the background color on your sidezone and replace it with this:
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 294px, transparent 294px);
Again, you can change the dimensions as you see fit.
See here: https://codepen.io/anon/pen/OKzWrN
Do you mean a background gradient?
Like this:
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(246,41,12,1) 66%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
I hope that this refers to what you were asking, but if you set one of the border-sides to a large size and solid color such as border-top: 10px solid blue;, then that could mimic the behavior that you are wanting.
EDIT: (I'm still not totally sure of what you are asking) I would create a div for the side, fill the background, and then have any elements that are inside the div to have background: transparent;. In my opinion, you should try not to use the ::before selector, as it might be difficult to tell where it actually goes.
Thanks to Frank Fajardo I manage to achieve what I wanted : https://codepen.io/mleger06/pen/WVddVg
HTML
<div class="container">
<div class="sidezone">
<div class="header"></div>
<div class="tab">
<div class="tab_elt active_tab">Tab 1</div>
<div class="tab_elt">Tab 2</div>
<div class="tab_elt">Tab 3</div>
<div class="tab_elt">Tab 5</div>
</div>
<div class="content"></div>
</div>
</div>
CSS
.container {
position: relative;
width: 1280;
height: 720px;
margin: auto 50px;
background-color: green;
}
.sidezone {
box-sizing: border-box;
position: absolute;
background-image: linear-gradient(to bottom, #000 294px, rgba(0, 0, 0, 0.5) 294px);
top: 0; right: 0;
width: 500px;
height: 720px;
padding: 26px 52px 26px 16px;
}
.sidezone:before {
content: '';
position: absolute;
top: 0; left: -50px; bottom: 0;
width: 0;
height: 0;
border-top: 294px solid #000;
border-left: 20px solid transparent;
border-right: 30px solid #000;
}
.sidezone:after {
content: '';
position: absolute;
top: 294px; left: -30px; bottom: 0;
width: 0;
height: 0;
border-top: 426px solid rgba(0, 0, 0, 0.5);
border-left: 20px solid transparent;
border-right: 10px solid rgba(0, 0, 0, 0.5);
}
.header {
color: #fff;
background-color: #000;
overflow: hidden;
font-family: o-HelveticaNeue, Helvetica, Arial, sans-serif;
font-weight: 700;
position: relative;
padding: 10px 10px 20px 10px;
margin-bottom: 10px;
height: 200px;
}
.tab {
background: #000;
}
.tab_elt {
color: white;
display: inline-block;
width: 24%;
text-align: center;
padding: 4px 0;
margin-bottom: -2px;
}
.active_tab {
color: #f16e00;
border-bottom: 2px solid #f16e00;
}
.content {
height: 419px;
background-color: white;
}
I change the color a little bit and add a :after element in CSS to fill the bottom part and keep the same shape of the left of my sidezone.
Thanks for helping !
Edit : here is an other result by a collegue with an other "tricks" to make it works with image : https://codepen.io/anon/pen/zgpjRQ
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>
I have two divs on top of each other (adjoined) and they booth as one unit shall have one box-shadow. Now the upper div gives shadow on the lower div which I don't want. I have tried to manipulate it with a "z-index:2" to be more on top but no luck.
I would like to hide the bottom shadow of the upper div and hide the top shadow of the lower div
Also I don't want the shadow to fold into the adjoined sides. The two divs should be one unit having one shadow
In my example here I have simpified the html
<div class="upper-box" style="width:100px;height:100px;">
</div>
<div class="lower-div" style="width:100px;height:100px;">
</div>
In the jsfiddle the css is all in original and here goes all the work of change.
.upper-box {
border-top: 0 none;
margin-bottom: 2px;
margin-top: -2px;
overflow: auto;
position: relative;
padding-top: 0;
/* Expanded panel gets emphasized by a shadow */
box-shadow: 0px 6px 50px 7px rgba(255,255,255,0.75),
0px 6px 50px 7px rgba(88,88,88,0.75),
0px 6px 50px 7px rgba(88,88,88,0.75),
0px 6px 50px 7px rgba(88,88,88,0.75)
;
z-index: 3;
border-style: solid;
border-color: #000000;
border-width: 0px;
position: relative;
}
.lower-div {
border-bottom: 0px;
box-shadow: 0px 6px 50px 7px rgba(88,88,88,0.75);
z-index: 2;
border-style: solid;
border-color: #000000;
border-width: 0px;
}
I would like to hide the bottom shadow of the upper div and hide the top shadow of the lower div
Also I don't want the shadow to fold into the adjoined sides. The two divs should be one unit having one shadow
Here is my live demo
https://jsfiddle.net/y289sdeb/
You could use a pseudo element, like this
.upper-box {
position: relative;
width: 100px;
height: 100px;
background: white;
}
.lower-div {
position: relative;
width: 100px;
height: 100px;
background: white;
}
.upper-box::after,
.lower-div::after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
box-shadow: 0px 6px 50px 7px rgba(88, 88, 88, 0.75);
z-index: -1;
}
<div class="upper-box">
</div>
<div class="lower-div">
</div>
Based on a comment, a wrapper can be used
.wrapper {
position: relative;
display: inline-block;
}
.upper-box {
position: relative;
width: 100px;
height: 100px;
}
.lower-div {
position: relative;
width: 100px;
height: 100px;
}
.wrapper::after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
box-shadow: 0px 6px 50px 7px rgba(88, 88, 88, 0.75);
z-index: -1;
}
<div class="wrapper">
<div class="upper-box">
</div>
<div class="lower-div">
</div>
</div>
I'm trying to make the div for bootstrap to look like below not sure how you do it with css. The arrow and the section labeleled movies
Please view the pic at https://plus.google.com/+SamuelMuiruri/posts/fMMhNQwPbCm
First of all you have to position the title "Movies" about the description. The arrow is a only a little css magic
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="specialbox">
<img src="https://placeimg.com/320/240/tech"/>
<div class="specialbox__description">
<span class="specialbox__title">Movies</span>
<h2>Age of Ultron</h2>
<p>Tony Stark tries ti jumpstart a dormant peace-kepping program...</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.specialbox {
border: 3px solid #ccc;
}
.specialbox img {
width: 100%;
}
.specialbox__description {
position: relative; /* You need this, to position the title element absolute to the description */
padding: 20px 10px;
}
.specialbox__title {
position: absolute;
background-color: yellow;
text-transform: uppercase;
padding: 10px;
border-radius: 10px 10px 0 0;
top: -40px; /* Adjust to the height of the title container */
}
/* Magic described here */
.specialbox__title:after {
position: absolute;
display: block;
content: '';
width: 30px;
height: 30px;
border: 15px solid transparent;
left: 50%;
bottom: -30px;
margin-left: -15px;
border-top: 15px solid yellow;
}
http://jsfiddle.net/ytbtbt1d/
I think you want to create a TRIANGLE edge below the div containg the text -'MOVIES' (see screenshot below)
I have created a code for you here: JSFIDDLE
HTML:
<div>Movies</div>
CSS
div{
position: relative;
display:inline-block;
width: 140px;
padding: 10px;
background:#FFC000;
text-transform: uppercase;
font-size: 24px;
text-align: center;
}
div:after{
position: absolute;
width: 0;
height: 0;
border-bottom: 40px solid rgba(0, 0, 0, 0);
border-right: 40px solid #FFC000;
bottom: -15px;
left: 0;
right:0;
margin:auto;
content: '';
-ms-transform: rotate(135deg); /* IE 9 */
-webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */
transform: rotate(135deg);
}
I am trying to create a downward-pointing arrow (.down) with CSS as a decorative element between the sections of a one-page site.
The problem is that the background-color of the .down-class is not spanning the whole width of the page:
This is my code:
HTML:
... </div>
<!-- About End-->
<div id="seperator"></div>
<div class="down"></div>
<!-- Portfolio -->
<div class="container-portfolio"> ... </div>
CSS:
#seperator {
background: #34495E;
height: 10px;
left: 0; right: 0;
}
.down {
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #34495E;
margin: 0 auto;
background: #16A085;
background-size: 100%;
}
I already tried to modify the background-size property of the .down-class, unfortunately without success. I would appreciate your advice on this. Thank you.
Try setting the background on the .down div and giving it 100% width, and then creating the 'arrow' as an :after pseudo-element.
#seperator {
background: #34495E;
height: 10px;
left: 0; right: 0;
}
.down {
width: 100%;
background: #16A085;
}
.down:after {
content: '';
display: block;
margin: 0 auto;
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #34495E;
}
Like this:
http://jsbin.com/APIyEbIp/1/edit
You might want to wrap another background class. Like this:
#seperator {
background: #34495E;
height: 10px;
left: 0; right: 0;
}
.down {
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #34495E;
margin: 0 auto;
}
.down_bkg {
background: #16A085;
background-size: 100%;
width:100%;
}
And HTML is like this:
<div id="seperator"></div>
<div class="down_bkg">
<div class="down"></div>
</div>
Try updating the down class CSS
width:100% or
min-width: 100%