I'm having trouble getting an element with a shadow inside a box (also with a shadow).
Any help?
http://jsfiddle.net/4T9Ac/
I think the trouble is with the z-index and position, but I can't quite put it together.
The rounded shadow must be behind the blue div, so that only the bottom shows at the bottom of the blue box. I want it to look like the "Single horizontal curve" in this demo: nicolasgallagher.com/css-drop-shadows-without-images/demo
Note: the HTML structure must not change, if possible!
HTML:
<section>
<div>
<span class="btn-jaune">
<a>
<span>hola</span>
</a>
</span>
</div>
</section>
CSS:
section {
border-top: 4px solid #00A1B1;
}
section > div {
background-color: #E6F8FA;
padding: 20px;
position: relative;
z-index: 1;
}
section > div:before {
content: "";
position: absolute;
z-index: -2;
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 100px / 10px;
border-radius: 100px / 10px;
-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.6);
-moz-box-shadow: 0 0 15px rgba(0,0,0,0.6);
box-shadow: 0 0 15px rgba(0,0,0,0.6);
}
.btn-jaune {
width: 100%;
background: #FFEA00;
display: block;
position: relative;
}
.btn-jaune > a {
padding: 0;
margin: 0;
height: 48px;
display: block;
}
.btn-jaune > a:before,
.btn-jaune > a:after {
content: "";
position: absolute;
z-index: -2;
bottom: 15px;
width: 49%;
height: 20%;
max-width: 300px;
max-height: 100px;
-webkit-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
}
.btn-jaune > a:before {
left: 4px;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
}
.btn-jaune > a:after {
right: 4px;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
}
.btn-jaune > a > span {
display: block;
text-transform: uppercase;
text-align: center;
font-weight: normal;
padding: 17px 30px;
margin-right: 20px;
}
Iqbal I don't see any changes with the code from your answer. Got a jsfiddle link?
What I want to achieve is this:
GOT IT!
The :before pseudo element went on the section, not on the section > div.
Also, as Iqbal said, the section had to be in relative position.
Thanks!
http://jsfiddle.net/4T9Ac/3/
Short changes.
section > div {
position: relative;
/*z-index: 1;*/
}
.btn-jaune {
position: relative;
z-index: 5;
}
.btn-jaune > a {
background: #FFEA00;
}
Long changes.
section {
position: relative;
}
section > div {
/*position: relative;*/
/*z-index: 1;*/
}
section > div:before {
/*z-index: -2;*/
}
.btn-jaune {
position: relative;
z-index: 5;
}
.btn-jaune > a {
background: #FFEA00;
}
.btn-jaune > a:before,
.btn-jaune > a:after {
position: absolute;
z-index: -1;
}
Warning: Negative z-index will not work in older browsers.
I am not 100% what you are wanting the final product to look like, but if you change section > div:before to have a top: 5%;, it puts the yellow box in the middle of the other box.
Related
In this mockup I have created, I am trying to create a custom arrow shape below each button whenever the mouse hovers over a button on the main navigation. However, the width will vary for each button and I need it to look the same. How would I accomplish this in CSS?
Click Here to see what I am trying to accomplish under 'I'm New' link.
So far, this is what I have in style.css:
.main_nav_inside {
margin: 0 auto;
margin-top: -130px;
position: relative;
z-index: 1;
}
.main_nav_inside ul {
list-style-type: none;
margin: 0;
float: right;
}
.main_nav_inside ul li {
display: inline-block;
float: left;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 500;
text-transform: uppercase;
}
.main_nav_inside ul li a {
display: block;
top: 0;
padding-left: 20px;
padding-right: 20px;
padding-top: 50px;
height: 130px;
color: #ffffff;
}
.main_nav_inside ul li a:hover {
padding-bottom: 5px;
width: 100%;
background-color: #2F2F2F;
}
.main_nav_inside ul li a:hover:before {
padding-bottom: 20px;
width: calc(2% + 30px);
background-color: #000000;
content: '';
position: absolute;
margin: 0 auto;
left: inherit;
margin-left: -20px;
margin-right: 0;
top: 120px;
height: 20px;
background: #000000;
-webkit-transform: skew(0deg, 0deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, 15deg);
z-index: -1;
}
.main_nav_inside ul li a:hover:after {
padding-bottom: 20px;
width: calc(10% / 2);
background-color: #000000;
content: '';
position: absolute;
margin: 0 auto;
right: inherit;
margin-left: -35px;
margin-right: 0;
top: 120px;
height: 20px;
background: #000000;
-webkit-transform: skew(0deg, 0deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -15deg);
z-index: -1;
}
Here is the HTML for this page as well:
<header id="header_inside">
<div class="main_logo_white"><img src="{{ siteUrl }}/images/ssumc_logo_white.png"></div>
{% set parents = craft.entries.section('menu').level(1).limit(5) %}
<nav class="main_nav_inside">
<ul>
{% nav parent in parents %}
<li>
{{ parent.getLink() }}
{% ifchildren %}
<ul class="dropdown">
<li>{% children %}</li>
</ul>
{% endifchildren %}
</li>
{% endnav %}
</ul>
</nav>
</header>
This website is being built using Craft CMS..not that this matters.
I was able to create the shape using border-top, border-left and border-right. But the bottom tip seems to stay flat and doesn't have a point to it. No matter what numbers you adjust in the border width of top, left or right the tip will stay flat.
.main_nav_inside ul li a:hover:after {
top: 100%;
left: 0;
right: 0;
content: " ";
position: absolute;
border-top: 20px solid #000000;
border-left: 50px solid rgba(0, 0, 0, 0);
border-right: 50px solid rgba(0, 0, 0, 0);
}
I am trying to replicate the effect when you hover over a date with Material UI's date picker here (click on any text input to trigger the picker, then hover over a day) where the background expands outwards from the center.
I've tried to copy the CSS from here, but I've only managed to get the opposite working. See: https://jsfiddle.net/2zkofa0x/3/
My CSS:
span:hover {
color: #fff;
background: rgba(0, 151, 167, 0.5);
border-radius: 50%;
transform: scale(1);
transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
Would anyone know how I can have the coloured background spread out and fill from the center of the element (opposite of what I've got above)?
You could try like this. It puts the hover effect on a parent div so the hit target is always there.
Also, the circle needs to start off at a scale of 0 so it can expand to the full size during the transition.
HTML:
<div class='container'>
<div class='circle'>
</div>
<span>42</span>
</div>
CSS:
div.container {
position: relative;
height: 30px;
width: 30px;
}
div.container > div.circle {
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
width: 30px;
height: 30px;
transform: scale(0);
transition: all 450ms ease 0ms;
}
div.container:hover > div.circle {
background: rgba(0, 151, 167, .5);
border-radius: 50%;
transform: scale(1);
transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
div.container span {
position: relative;
padding: 7px;
line-height: 30px;
}
div.container:hover span {
color: rgb(255, 255, 255);
}
https://jsfiddle.net/2zkofa0x/18/
Use box-shadow
li { position: relative; display: inline-block; padding: 10px; }
li:before {
content: '';
height: 1px;
width: 1px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 0 0px #18b;
border-radius: 50%;
background: #18b;
transition: all .3s;
opacity: 0;
z-index: -1;
}
li:hover:before {
box-shadow: 0 0 0 15px #18b;
opacity: 1;
}
<ul>
<li>1</li>
<li>2</li>
</ul>
You could try something like this. You could also use jquery to get the same effect.
/* Material style */
button {
height: 200px;
width: 200px;
border: none;
cursor: pointer;
color: white;
padding: 15px;
border-radius: 360px;
font-size: 22px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
background: #2196F3;
}
/* Ripple magic */
button{
position: relative;
overflow: hidden;
}
button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
background: rgba(255, 255, 255, .5);
opacity: 0;
border-radius: 50%;
transform: scale(1, 1) translate(-50%);
transform-origin: 50% 50%;
}
#keyframes ripple {
0% {
transform: scale(0, 0);
opacity: 1;
}
20% {
transform: scale(25, 25);
opacity: 1;
}
100% {
opacity: 0;
transform: scale(40, 40);
}
}
button:focus:not(:active)::after {
animation: ripple 1s ease-out;
}
/* On Hover */
.ripple-button1{
position:relative;
width:200px;
height:200px;
background-color:#99C;
color:#FFF;
border-radius:360px;
text-decoration:none;
text-align:center;
vertical-align:middle;
display:table-cell;
box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
}
.wave1{
position:absolute;
width:200px;
height:200px;
background-color:#FFF;
top:0;
left:0;
transform: scale(0);
opacity:0.5;
border-radius:300px;
}
.ripple-button1:hover > .wave1{
animation: ripple-in1 2s;
}
#keyframes ripple-in1 {
0% {transform: scale(0);}
20%{transform: scale(1);opacity:0.3;}
100%{transform: scale(1);opacity:0;}
}
<h3>Ripple on Click</h3>
<button>Click !</button>
<h3>Ripple on Hover</h3>
<div class="wave1"></div>Hover !
I was looking for the same. Thank you for raising. Though you have already chosen an answer, I'll share my hack which looks similar to the one on the quoted page.
div {
margin: 25px;
height: 100px;
width: 100px;
text-align: center; //Fix the element to center
}
span {
width: 50px;
height: 50px;
padding: 5px;
border-radius: 50%;
}
span:hover {
color: #fff;
background: rgba(0, 151, 167, 0.5);
padding: 15px; //Transform padding, width and height instead of border-radius
width: 20px;
height: 20px;
transform: scale(1);
transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 1ms;
}
<div>
<span>42</span>
</div>
Hee!
Currently I'm trying to make the following nav
but ending up getting the following
How can I lower the height of the arrow I'm adding at the bottom but keeping the full width?
nav {
position: relative;
display: inline-block;
height: 50px;
width: 100%;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
padding-bottom: 15%;
background-clip: content-box;
overflow: hidden;
}
nav:after {
content: "";
position: absolute;
top: 50px;
left: 0;
background-color: inherit;
padding-bottom: 50%;
width: 57.7%;
z-index: -1;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(-30deg) skewX(30deg);
-ms-transform: rotate(-30deg) skewX(30deg);
transform: rotate(-30deg) skewX(30deg);
}
<nav>nav</nav>
http://jsfiddle.net/v50wwuw6/
Using the border triangle technique with vw unit: http://jsfiddle.net/hamop5ca/
30px is the arrow height.
nav {
position: relative;
height: 50px;
width:100%;
background: gray;
}
nav:before {
content: "";
position: absolute;
top: 100%;
left: 0;
border-top: 30px solid red;
border-left: 50vw solid transparent;
border-right: 50vw solid transparent;
}
<nav>nav</nav>
How can I achieve this?
It's a wordpress menu.
pic
Ok, so far I have this:
ul{
display: flex;
li{
width: 100%;
a{
position: absolute;
bottom: 0;
top: 0;
width: 2%;
span{
display: block;
position:absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
};
};
};
};
and it works, but now I need some kind of a javascript, so that the headings inside the span will be centered and every element will have the same amount of space from left and right.
pic2
got it done, with adding left: %; to each menu item element.
Thanks for help!
Made it like this:
fiddle: https://jsfiddle.net/uq3vLvpb/
The html:
<ul>
<li><a><span>one</span></a></li>
<li><a><span>two</span></a></li>
<li><a><span>three</span></a></li>
<li><a><span>four</span></a></li>
<li><a><span>five</span></a></li>
<li><a><span>six</span></a></li>
<li><a><span>seven</span></a></li>
<li><a><span>eight</span></a></li>
</ul>
The css:
ul {
li {
width: 100%;
a {
position: absolute;
bottom: 0;
top: 0;
width: 10.5%;
font-family: 'Lora', serif;
font-size: 26px;
font-weight: 400;
text-align: center;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
text-decoration: none;
padding: 0 15px;
cursor: pointer;
span {
display: block;
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -35%);
-webkit-transform: translate(-50%, -35%);
-moz-transform: translate(-50%, -35%);
}
&:hover {
background-color: rgba(0, 0, 0, 0.4);
}
}
}
li:first-child {
a {
left: 9.5%;
}
}
li:nth-child(2) {
a {
left: 19.5%;
}
}
li:nth-child(3) {
a {
left: 29.6%;
}
}
li:nth-child(4) {
a {
left: 39.6%;
}
}
li:nth-child(5) {
a {
left: 49.7%;
}
}
li:nth-child(6) {
a {
left: 59.8%;
}
}
li:nth-child(7) {
a {
left: 69.9%;
}
}
li:nth-child(8) {
a {
left: 80%;
}
}
}
I have created a slant style triangle using borders to use on navigation items, however the border that is used to define the length of the slant is fixed and it needs to adapt based on the content inside the list item. I also want to use the same css class for each list item.
Is this the best solution for what I am trying to achieve or is there an alternative method that has the same result?
I am open to JS solutions too.
I have used the following CSS so far:
li {
float: left;
position: relative;
height: 20px;
background: #a1a8ad;
padding: 5px 12px;
margin-right: 10px;
list-style: none;
}
li:before {
content: "";
position: absolute;
top: -3px;
width: 0;
height: 1px;
left: 0px;
border-right: 63px solid #a1a8ad; /* razorblade color */
border-top: 2px solid rgba(0, 0, 0, 0); /* transparent */
}
JSFiddle here
You can't use percentages for the border-width but you can use a rotated pseudo element to make the slanted top border :
li {
float: left;
position: relative;
margin-right: 10px;
list-style: none;
overflow: hidden;
padding-top: 8px;
}
li a {
display: block;
background: #a1a8ad;
padding: 5px 12px;
color: #000;
height: 20px;
text-decoration: none;
}
li:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 150%;
height: 30px;
background: #a1a8ad; /* razorblade color */
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
z-index: -1;
}
<nav>
<ul>
<li>Home
</li>
<li>About Us
</li>
</ul>
</nav>