Hello partners!
I wanted to see if someone could advise me on how to do the following:
In a webapp that I am making I have a stylized NavBar as seen in the photos (in AdobeXD it is shown as a union of a rectangle with a circle).
Nav Example AdobeXD | Complete View
How could I make that navbar with HTML / CSS?
I already have the following but I have the problem of how to merge the div of the rectangle and the div of the circle in order to have the same shadow and the same linear gradient, it is possible to do that? 🥺 or would it be better to export that nav as SVG?
body{
margin: 0;
}
.navContainer{
width:100vw;
}
.mainNav{
width:100vw;
background: linear-gradient(#30355e 0%, #383e6e 100%);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
height: 73px;
border-radius: 0 0 40px 40px;
filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.25));
}
.circleNav{
width:110px;
height:110px;
background: linear-gradient(#30355e 0%, #383e6e 100%);
border-radius: 50%;
position: absolute;
left: calc(50% - 57px);
top: 10px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
<html>
<div class="navContainer">
<div class="mainNav">
</div>
<div class="circleNav">
</div>
</div>
</html>
You can do it like below:
body {
margin: 0;
}
.navContainer {
width: 100vw;
filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.45)); /* filter on main container */
}
.mainNav {
background:
linear-gradient(#30355e 0%, #383e6e 100%)
top/100% 110px; /* 110px = height of circle */
height: 75px;
border-radius: 0 0 40px 40px;
}
.circleNav {
width: 110px;
height: 110px;
background: linear-gradient(#30355e 0%, #383e6e 100%);
border-radius: 50%;
margin: -75px auto 0; /* same as height of nav */
}
<div class="navContainer">
<div class="mainNav">
</div>
<div class="circleNav">
</div>
</div>
Or with a reduced code like below:
body {
margin: 0;
}
.navContainer {
filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.45)); /* filter on main container */
height: 110px;
}
.navContainer::before,
.navContainer::after{
content:"";
position:absolute;
top:0;
height:100%;
border-radius: 50%;
background-image:linear-gradient(#30355e, #a3aae4);
}
.navContainer::before {
left:0;
right:0;
height:70%;
background-size:100% calc(100%/0.7);
background-position:top;
border-radius: 0 0 40px 40px;
}
.navContainer::after {
left:50%;
aspect-ratio:1/1; /* the support of this is low so you can replace it with width:110px */
transform:translate(-50%);
}
<div class="navContainer">
</div>
Related
I want to make a card look like this, the border or the sides of the card are semi-circular, is it possible to make it with css? if yes, how? Thank you in advance
.wrapper {
}
.content-card {
width: 315px;
height: 131px;
left: 0px;
top: 0px;
background: #FFFFFF;
box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.12);
border-radius: 8px;
}
<div class="wrapper">
<div class="content-card">
</div>
</div>
Multiple background can do it:
.content-card {
width: 300px;
height: 150px;
background:
radial-gradient(8px at left ,#0000 98%,#fff) left ,
radial-gradient(8px at right,#0000 98%,#fff) right;
background-size: 50.5% 25px;
background-repeat:repeat-y;
filter: drop-shadow(4px 8px 12px rgba(0, 0, 0, 0.12));
border-radius: 8px;
}
body {
background: pink;
}
<div class="content-card">
</div>
The old way - border-image
It permits you to use the willing image for borders, it was widely use for this kind of cases. You can have repeat option on it to allow different box's sizes with the same style.
The mozilla doc is quite explicit with good examples of it : https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
The recent way - without image
You have the possibility to use pseudo-element :after and :before and stylize those elements with a repeated background using radial-gradient.
body {
background-color: #ffaaaa;
}
.ticket {
position: relative;
width: 300px;
height: 170px;
margin: 10px;
border-radius: 10px;
background: white;
box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.12);
}
.ticket:before,
.ticket:after {
content: '';
position: absolute;
top: 5px;
width: 6px;
height: 160px;
}
.ticket:before {
left: -5px;
background: radial-gradient(circle, transparent, transparent 50%, #FBFBFB 50%, #FBFBFB 100%) -7px -8px/16px 16px repeat-y;
}
.ticket:after {
left: 300px;
background: radial-gradient(circle, transparent, transparent 50%, #FBFBFB 0%, #FBFBFB 100% ) -3px -7px / 16px 16px repeat-y;
}
<div class="ticket"></div>
I am trying to add an inset box shadow that has transparency/fades out on the left and right edges of a div. I managed to add a normal inset box shadow but I don't know how to add transparency to the edges. How can I do this?
Here's an example of what I'm trying to achieve.
.container {
height: 300px;
width: 300px;
box-shadow: rgb(178, 169, 169) 0px 8px 8px -8px inset, rgb(178, 169, 169) 0px -8px 8px -8px inset;
<div class="container">
</div>
I managed to do it using radial-gradient. Check this fiddle
*{
box-sizing: border-box;
}
body{
margin: 0;
}
.banner{
width: 100%;
padding: 30px;
background: #eee;
position: relative;
}
.banner::before{
content: "";
background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 75%);
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 15px;
z-index: -1;
}
<div>
<div class="banner"></div>
</div>
I am trying to achieve this shape of div to hold profile information.
So far I've curved one of the corners. However, I am having problems parallel lines.
My HTML:
<div class="profile-card">
<h1>Sector Specialist</h1>
<p>Frank ocean</p>
</div>
My CSS:
.profile-card{
margin-top:150px;
float:right;
background-color: rgba(0,0,0,0.4);
height:500px;
text-align:center;
padding: 50px 40px;
border: 2px solid red;
border-top-left-radius: 39px;
}
The codepen is https://codepen.io/anon/pen/wjMQmw
Thank you in advance.
I would consider a solution with pseudo-element with some skew transformation:
.profile-card {
background: rgba(0, 0, 0, 0.4);
width: 200px;
text-align: center;
padding: 50px 0 0 40px;
border-top-left-radius: 39px;
border-left: 1px solid red;
border-top: 1px solid red;
position: relative;
}
.profile-card:before {
content: "";
position: absolute;
right: -40px;
width: 40px;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
transform: skewY(45deg);
transform-origin: top left;
border-top: 1px solid red;
border-right: 1px solid red;
box-sizing:border-box;
}
.profile-card:after {
content: "";
position: absolute;
bottom: -40px;
height: 40px;
right: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
transform: skewX(45deg);
border-left: 1px solid red;
border-bottom: 1px solid red;
transform-origin: top left;
box-sizing:border-box;
}
body {
background:linear-gradient(to right,lightblue,pink)
}
<div class="profile-card">
<h1>Sector Specialist</h1>
<p>Frank ocean</p>
</div>
Without the border I would consider multiple gradient to achieve the layout:
.profile-card {
background:
linear-gradient(to bottom left,rgba(0, 0, 0, 0.4) 50%,transparent 51%)0 100%/50px 50px no-repeat,
linear-gradient(to top right,rgba(0, 0, 0, 0.4) 50%,transparent 51%)100% 0/50px 50px no-repeat,
linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4))100% 100%/calc(100% - 50px) 50px no-repeat,
linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4))0 0/calc(100% - 50px) 50px no-repeat,
linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4))0 50px/100% calc(100% - 100px) no-repeat;
width: 200px;
text-align: center;
padding: 50px 40px;
border-top-left-radius: 39px;
}
<div class="profile-card">
<h1>Sector Specialist</h1>
<p>Frank ocean</p>
</div>
Or the clip-path solution:
.profile-card {
background:rgba(0, 0, 0, 0.4);
width: 200px;
text-align: center;
padding: 50px 40px;
border-top-left-radius: 39px;
-webkit-clip-path: polygon(1% 0%, 75% 1%, 100% 30%, 100% 100%, 21% 100%, 0% 74%);
clip-path: polygon(1% 0%, 75% 1%, 100% 30%, 100% 100%, 21% 100%, 0% 74%)
}
<div class="profile-card">
<h1>Sector Specialist</h1>
<p>Frank ocean</p>
</div>
For super complex bordering, one option is to use SVG. Here is an example of basic usage of polygon. SVG embedded into HTML can be styled using CSS easily:
body{
margin:0;
height: 500px;
background: url('https://cdn3.tropicalsky.co.uk/images/1280x720/downtown-dubai-aerial-view.jpg');
}
.profile-card{
margin-top:5px;
background-color: transparent;
height:800px;
width: 200px;
text-align:center;
padding: 50px 40px;
position: relative;
}
.profile-card h1, .profile-card p {
position: relative;
}
.frame {
position: absolute;
top: 20px;
left: 20px;
opacity: 0.7;
}
<div class="profile-card">
<svg class="frame" height="300" width="300">
<polygon points="50 0,250 0,300 50,300 300, 50 300, 0 250, 0 50,7.5 25, 15 15, 25 7.5" style="fill:lightgrey;stroke:orange;stroke-width:1" />
</svg>
<h1>Sector Specialist</h1>
<p>Frank ocean</p>
</div>
Is it possible to add a blur to only one side of a div using box-shadow?
What I am trying to achieve is a shadow with no width, just blur on only one side of a div. In my example I try to apply it to the bottom but the side really shouldn't matter.
I tried have using box-shadow: 0px 5px 5px -5px #000000; however using this method the shadow does not cover the whole length on the bottom of the div.
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #eeeeee;
}
#box {
width: 100%;
height: 100%;
box-shadow: 0px 5px 5px -5px #000000;
background: yellow;
}
<div id="bg">
<div id="box"></div>
</div>
Only HTML and CSS solutions please.
You could use an after element and stretch it a little:
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #eeeeee;
}
#box:after {
content:'';
display:block;
position:absolute;
z-index:0;
top:0;
left:-4px;
right:-4px;
bottom:0;
box-shadow: 0px 5px 5px -5px #000000;
}
#box {
width: 100%;
height: 100%;
position:relative;
background: yellow;
}
<div id="bg">
<div id="box"></div>
</div>
try this for bottom positioned box-shadow
.your_class {
box-shadow: 0 8px 6px -6px black;
}
You can also read https://developer.mozilla.org/en/docs/Web/CSS/box-shadow to understand how the box-shadow works
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #eeeeee;
}
#box {
width: 100%;
height: 100%;
border-bottom: 2px solid #ccc;
background: yellow;
}
<div id="bg">
<div id="box"></div>
</div>
There is no readily available way to do precisely what you seek, at least not using a single box-shadow. Remember, the CSS box-shadow property accepts multiple comma-delimited entries, so this is your best bet if you're committed to using them. In the example below, I'm simply using two copies of the same box-shadow value with one difference: I've offset the first horizontally toward the left by 2.5px and the other toward the right by positive 2.5px. Additionally, I've added opacity to the color (due to mitigate the darkening effect of overlapping shadows).
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #EEE;
}
#box {
width: 100%;
height: 100%;
box-shadow: -2.5px 5px 5px -3px rgba(0, 0, 0, 0.50),
2.5px 5px 5px -3px rgba(0, 0, 0, 0.5);
background-color: Yellow;
}
<div id="bg">
<div id="box"></div>
</div>
Try this
#bg {
text-align: center;
width: 200px;
height: 200px;
padding: 50px;
background: #eeeeee;
}
#box:after {
content:'';
display:block;
position:absolute;
z-index:0;
bottom:0px;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #9C9C9C),
color-stop(0.22, #EEEEEE)
);
background-image: -o-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -moz-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -webkit-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: -ms-linear-gradient(bottom, #9C9C9C 0%, #EEEEEE 22%);
background-image: linear-gradient(to bottom, #9C9C9C 0%, #EEEEEE 22%);
height:10px;
width:100%;
}
#box {
width: 100%;
height: 100%;
position:relative;
background: yellow;
}
https://jsfiddle.net/Lfa4z5b4/
I want to have the header's navigation to have a box shadow. However, the box-shadow seems to be hidden by the carousel I placed below it. I put a z-index of all children of #carousel but the box-shadow still doesn't show up.
(page snippet)
Here's what happens when I push #carousel down when I give it margin-top: 40px;
(another page snippet)
HTML
<header>
<nav>
<div class="container">
<h1><img src="images/logo.png" alt="" id="logo"></h1>
<h1 id="NHS">Newport High School</h1>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Students</li>
<li>Parents</li>
<li>Activities & Atletics</li>
<li>Resources</li>
</ul>
</div><!--container--->
</nav>
</header><div id="carousel">
<div class="inner">
<ul>
<li><img src="images/example-slide-1.jpg" alt="Fish"></li>
<li><img src="images/example-slide-2.jpg" alt="Elephant"></li>
<li><img src="images/example-slide-3.jpg" alt="Giraffe"></li>
<li><img src="images/example-slide-4.jpg" alt="Fish"></li>
</ul>
</div>
</div>
CSS
/* - - - header - - - */
header {
background: rgb(30,27,27); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,27,27,1) 0%, rgba(2,2,2,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,27,27,1)), color-stop(100%,rgba(2,2,2,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%);
box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
-webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
-moz-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
z-index: 1000;
}
header h1, header li {
float: left;
}
header a {
color: #A1A1A1 ;
font-family: arial, helvetica, verana, sans-serif;
}
header a:hover {
color: #A1A1A1;
text-decoration: none;
}
#logo {
width: 50px;
}
#NHS {
margin: 1.8% 0 0 2%;
font-size: 1.2em;
text-transform: uppercase;
}
#NHS a {
color: #F6F6F6;
letter-spacing: 2px;
}
#nav {
float: right;
margin: 3% 0 0 0;
}
#nav li {
margin-right: 20px;
padding: 0;
}
#nav li:last-of-type {
margin-right: 0px;
}
#nav a {
font-size: .8em;
text-transform: uppercase;
padding-top: 3px;
font-weight: 400;
}
#nav a:hover {
border-top: 1px dotted #C41D0E;
}
/* - - - carousel - - - */
#carousel {
margin: 40px 0 0 0;
width: 100%;
overflow: hidden;
z-index: -999;
}
#carousel .inner {
box-sizing: border-box;
margin-left: -50px;
z-index: -5000;
}
#carousel ul {
width: 60000px;
height: 480px;
z-index: -5000;
}
#carousel li {
height: 480px;
float: left;
overflow: hidden;
z-index: -5000;
}
#carousel img {
text-align: center;
width: 1375px;
height: auto;
z-index: -5000;
}
Remember z-index only works with positioned elements. So both your carousel and header needs to have a position value other than static and then you can specify a higher z-index to the header. That way box-shadow will appear properly above the carousel.
You only need to add position:relative to the header. The carousel doesn't need a z-index alteration.
try adding !important to your shadowbox. I think that should work.
box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;
-webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;
-moz-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;