I have a div that I've got that's circular using border-radius: 50% what I also want to achieve is mimicking something I've already seen implemented on hover.
spacing between the border and the div.
I've tried adding padding: 5px to the hover but it doesn't create a border that's not on the div.
Code
#sub-section .content .icon-div {
background-color: rgba(204, 202, 202, 0.25);
border-radius: 50%;
width: 90px;
height: 90px;
margin-right: auto;
margin-left: auto;
text-align: center;
padding-top: 13%;
margin-bottom: 2em;
transition: all ease .3s;
}
#sub-section .content .icon-div:hover {
border: 1px solid #f6653c;
background-color: #f6653c;
padding: 5px;
transition: all ease .3s;
}
Here's a quick example using an inset box-shadow, as it's less likely to mess with your layout than animating padding:
(Bare in mind, it's not true transparency, the white inner circle is a set colour, which may or may not fit your need)
#example{
display: block;
width: 100px;
height: 100px;
color: #FFF;
text-align: center;
line-height: 100px;
background-color: #f6653c;
border: 2px solid #f6653c;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,1);
transition: box-shadow 0.2s linear;
}
#example:hover{
box-shadow: inset 0px 0px 0px 5px rgba(255,255,255,1);
}
<div id="example">Hover me</div>
You could use a radial gradient:
div {
width: 120px;
height: 120px;
border-radius:50%;
border:1px solid #FA532A;
}
.simple-radial {
background: radial-gradient(#FA532A 54px, rgba(204, 202, 202, 0.25) 2px, white 4px);
}
<div class="simple-radial"></div>
Related
I want to radius the border of the card but the code does not work properly..
Here is the code I used.
.card{
box-shadow: 0 4px 8px 0 #333333;
transition: 0.3s;
border-radius: 30px;
width: 100%;
}
Add border border:2px solid black;
.card{
box-shadow: 0 4px 8px 0 #333333;
transition: 0.3s;
border:2px solid black;
border-radius: 30px;
width: 100%;
}
if you want to make more space between text and border you can add padding to this code:
card{
box-shadow: 0 4px 8px 0 #333333;
transition: 0.3s;
border-radius: 30px;
width: 100%;
border: 1px solid #000;
}
I have created an animated rotated button and I would like it to have a shadow that is paralel to the x-axis. Now the shadow is not, do You have an idea how to make it? Thank You. This is the css of the existing button and the link to the codepan with "the live example".
.btnMail{
border-radius: 4px;
background-color: rgba(120, 0, 255, 0.8);
border: none;
color: white;
padding: 12px 16px;
font-size: 30px;
cursor: pointer;
transform: rotate(-10deg);
transform-origin: bottom left;
box-shadow: 0 8px 6px -6px black;
}
https://codepen.io/hubkubas/pen/dmJjWB
Based on the understanding of your question, you can achieve fancy 3D looking shadows or custom depth shadows by applying shadow-box property to pseudo elements which you can then further manipulate, to get the desired shadows.
Here is a quick-fix that probably shows the type of shadow you want:
/* btn */
.btnMail{
width: 65px;
height: 60px;
display: inline-block;
border-radius: 4px;
background-color: rgba(120, 0, 255, 0.8);
border: none;
color: white;
padding: 12px 16px;
font-size: 30px;
cursor: pointer;
transform: rotate(-10deg);
transform-origin: bottom left;
}
.btnMail:hover {
transition: 0.30s;
transform: rotate(0deg);
box-shadow: 0px 8px 6px -6px black;
background-color: rgba(255, 0, 54, 0.8);
}
.btnMail:active {
box-shadow: 0 6px 6px -6px black;
transition: 0.30s;
}
#shadow{
z-index: -111;
width: 65px;
height: 50px;
position: absolute;
top: 17px;
left: 5px;
box-shadow: 0px 10px 16px -9px black;
}
<button class="btnMail shadow"><i class="fa fa-envelope"></i></button>
<div id="shadow">
</div>
(Note: I have used a seperate div tag for the shadow, since the animation you apply on the button will also be applied on the shadow).
You can learn more about how to create custom shadows on this link.
Here's what i want to accomplish:
As you can see, there's a small border at the bottom, i've tried to add border-bottom: 1px solid #c1ad6f but it results to:
Border is not fully filled cause of radius.
.btn {
background: #d5c289;
border-bottom: 6px solid #c1ad6f;
font-weight: 500;
font-size: 1.125rem;
padding: 1.25rem;
border-radius: 4px;
}
<a class="btn" href="#form" role="button">Enroll</a>
You may consider box-shadow instead of border to achieve this in a better way:
.box {
display: inline-block;
margin: 10px;
height: 100px;
width: 200px;
background: #d5c289;
box-sizing:border-box;
border-radius: 0 0 20px 20px;
}
.shadow {
box-shadow: 0 -10px 0 0 #c1ad6f inset;
animation: anime 2s infinite linear alternate;
}
.border {
border-bottom: 10px solid #c1ad6f;
animation: anime-alt 2s infinite linear alternate;
}
#keyframes anime {
from {box-shadow: 0 -1px 0 0 #c1ad6f inset;}
to {box-shadow: 0 -30px 0 0 #c1ad6f inset;}}
#keyframes anime-alt {
from {border-bottom: 1px solid #c1ad6f;}
to {border-bottom: 30px solid #c1ad6f;}}
<div class="box shadow">
Good one with box-shadow
</div>
<div class="box border">
Not good with border
</div>
This is simple trick to make border rounded using box-shadow. it will
exactly giving the output what you want.
.btn-bordered {
background: #17aa56;
color: #fff;
border-radius: 15px;
box-shadow: 0 10px #119e4d;
padding: 25px 60px 25px 90px;
}
.btn-block {
border: none;
font-family: inherit;
font-size: inherit;
color: inherit;
background: #ddd;
cursor: pointer;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: Capitialize;
letter-spacing: 1px;
font-weight: 700;
position: relative;
overflow:hidden;
}
<button class="btn-bordered btn-block" type="button">Bottom Rounded Button</button>
#AlexanderKim, you could increase border-bottom. like this: border-bottom: 5px solid #c1ad6f;. I made this fiddle: jsfiddle.net/bektkdnz but increased padding so it was easier to see
I have a div with the style as so:
.oval {
width: 100%;
height: 30%;
border-radius: 250px;
font-weight: bold;
line-height: 2em;
font-size: 1em;
color: #fff;
text-align: center;
}
And also a background color.
I want to add a shadow to this circle.
Is that possible?
I'm seeing conflicting information, with people saying that's inside the image, so you can't apply any styles to it, and other people suggesting that a style like that exists or there is a way to do it.
You can use the box-shadow property:
.oval {
width: 100%;
height: 30%;
border-radius: 250px;
font-weight: bold;
line-height: 2em;
font-size: 1em;
text-align: center;
box-shadow:0 0 2px 2px #999;
}
<div class="oval">text</div>
I think you are looking for box shadow:
-webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
-moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
box-shadow: 0px 0px 30px 0px rgba(0, 0, 255, 0.67);
This link explains it: http://www.w3schools.com/cssref/css3_pr_box-shadow.aspAnd this link lets you experiment with it: http://www.cssmatic.com/box-shadow
Use box-shadow property:
.oval {
width: 150px;
height: 150px;
border-radius: 150px;
font-weight: bold;
font-size: 1em;
color: #fff;
text-align: center;
display: block;
background-color: red;
box-shadow: 3px 3px 3px #aaa;
}
<div class="oval"></div>
Box Shadow!
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
.circle {
width: 150px;
height: 150px;
background-color: yellow;
border-radius: 50%;
box-shadow: 5px 5px 5px #BC7046;
position: absolute;
top: 10px;
left: 10px;
}
.circle2{
box-shadow: -6px -6px 6px #BCAE46;
}
#square {
border-radius: 5px;
width: 170px;
height: 170px;
background-color: #D0DA72;
position: relative;
}
<div id=square>
<div class=circle></div>
<div class='circle circle2'></div>
</div>
On my site I have links with a box shadow that appears when hovering. You can see it on http://www.lorteau.fr . That works just fine on Chrome, Opera and Firefox. IE however clips the top of it.
Chrome, Opera, Firefox:
IE:
HTML defining the links and all the containers around it:
<body>
<div class="main m-scene" id="page">
<div id="menu">
<a class="menu_link" id="wphone_link" href="wphone.html">Windows Phone</a>
<a class="menu_link" id="wmetro_link" href="wmetro.html">Windows Metro</a>
<a class="menu_link" id="wdesktop_link" href="wdesktop.html">Windows Desktop</a>
<a class="menu_link" id="linux_link" href="linux.html">Linux</a>
<a class="menu_link" id="other_link" href="other.html">Other</a>
</div>
</div>
</body>
CSS3 defining the hovering effect and the containers around it:
.html
{
background-color: #464646;
}
body
{
margin: 0;
}
#page
{
width: 900px;
min-width: 800px;
min-height: 100%;
-pie-box-shadow: 0px 0px 3px 1px #FFFFFF;
-moz-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
-webkit-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
background-image: none;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #3C3C3C;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 7px 5px 6px 32px;
}
#menu
{
height: 57px;
display: block;
width: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
text-align: center;
}
.menu_link, .menu_link:hover
{
font-family: 'Electrolize', Arial, sans-serif;
font-size: 18px;
text-align: left;
color: white;
display: inline;
text-decoration: none;
border-style: solid;
border-width: 1px;
border-color: #777777;
border-radius: 5px;
background-color: #777777;
padding: 5px;
margin-right: 5px;
-webkit-transition: 250ms linear 0s;
-moz-transition: 250ms linear 0s;
-o-transition: 250ms linear 0s;
transition: 250ms linear 0s;
}
.menu_link:hover
{
color: #FFBE5B;
box-shadow: 0px 0px 5px 5px rgba(255, 190, 91, 0.5);
}
.menu_link:active
{
color: #FFBE5B;
}
.m-scene .scene_element
{
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
transition-timing-function: ease-out;
}
I tried all the padding, margin and height combinations I could think of but that didn't change anything. Would some have an idea as to what I could modify so that the shadow isn't clipped on any browser?
Pff never mind. Removed "margin-top: 5px;" from #menu and added "padding-top: 15px;" and that did it.
Spelling out the question clearly always helps!