I am trying to underline the Elementor heading with css class and an effect of heading filled with color from bottom upon hovering. The following code fills the whole box. How can I limit it to fill only the heading without custom adjusting padding for each box? Thank you!
Just as described above.
.da {
box-shadow: inset 0 -8px 0 -1px #028DB8;
transition: box-shadow .45s ease-in-out;
color: black;
line-height: 40px;
}
.da:hover {
box-shadow: inset 0 -40px 0 -1px #AED476;
}
<html>
<head>
<title></title>
</head>
<body>
<div class="da">
<h2>Simple Text</h2>
</div>
</body>
</html>
Just use the animation on h2 element.
Remove line-height and add display:inline-block so the widht of the h2 element is exactly long as the text
h2 {
box-shadow: inset 0 -8px 0 -1px #028DB8;
transition: box-shadow .45s ease-in-out;
color: black;
display:inline-block;
/*line-height: 40px;*/
}
h2:hover {
box-shadow: inset 0 -40px 0 -1px #AED476;
}
<html>
<head>
<title></title>
</head>
<body>
<div class="da">
<h2>Simple Text</h2>
</div>
</body>
</html>
Related
I want to show the box shadow on every side except bottom.
Here is the css I'm using.
box-shadow: 0 0 12px 4px #ddd;
How to remove bottom shadow from it?
You can't change the dimensions of the shadow across one axis only (i.e you can't reduce just the height of the shadow). One trick is to add the shadow to a pseudo element and reduce the height of that element.
.shadow {
margin:20px;
width:400px;
height:200px;
background:red;
position:relative;
}
/* Pseudo element for adding shadow */
.shadow:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:16px;
box-shadow: 0 0 12px 4px #999;
z-index:-1;
}
<div class="shadow"></div>
You can use the negative value to push it off the edge.
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 0px -4px 12px 4px #888888;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div></div>
</body>
</html>
you may use more than 1 shadow:
body {
box-shadow:
-12px -10px 12px -4px /* negative value here decrease the size */#ddd,
12px -10px 12px -4px #ddd,
inset 0 -3px lime /* demo , show bottom */;
padding:4em 8em;
background:gray;
}
/* demo purpose */
html {
display:flex;
align-items:center;
justify-content:center;
height:100vh;
}
it can draw things like this
I am brand new to CSS and only know very basic things. I found this code on the interwebs and it works to create a button but I will be using an image inside the button and when hovered I will have a color over the image and want to display text, how do I get it to say LEARN MORE once it is hovered? one more thing. how do I change the color when hovered? is there a way to change it using html color codes instead of the rgba? I have no idea how to use the rgba and want the color to change to #f58020 thanks and hopefully that makes sense
.circle {
display:block;
text-decoration:none;
border-radius:100%;
background:#12809b;
width:100px;
height: 100px;
color:#fff;
text-align:center;
font:bold 16px/100px Arial, sans-serif;
text-transform:uppercase;
transition: all 0.4s ease-in-out;
box-shadow:inset 0 0 0 5px rgba(0,0,0,.5), inset 0 0 0 10px rgba(255,255,255,.3);
}
.circle:hover {
box-shadow:inset 0 0 0 10px rgba(255,255,255,.5), inset 0 0 0 100px rgba(0,0,0,.5);
}
please watch this link DEMO
HTML
<button class="circle" ><span>new</span></button>
CSS
span{
display: none;
}
.circle {
display:block;
text-decoration:none;
border-radius:100%;
background:#12809b;
width:100px;
height: 100px;
color:#fff;
text-align:center;
font:bold 16px/100px Arial, sans-serif;
text-transform:uppercase;
transition: all 0.4s ease-in-out;
box-shadow:inset 0 0 0 5px rgba(0,0,0,.5), inset 0 0 0 10px rgba(255,255,255,.3);
}
.circle:hover{
box-shadow:inset 0 0 0 10px rgba(255,255,255,.5), inset 0 0 0 100px rgba(0,0,0,.5);
}
.circle:hover span{
display: block;
}
use
MARK UP
<div class="circle"><span>Learn</span></div>
or
<button class="circle"><span>Learn</span></button>
CSS
span{
display: none;
}
.circle:hover span{
display:block;
}
FIDDLE DEMO
You don't need to add non semantic html elements. Add those styles to your code to get the hidden text:
.circle {color: transparent}
.circle:hover {color: white}
<a class="circle">Learn<br>More</a>
Then, add a padding top to .circle, reduce height and change line-height:
.circle {height: 65px; padding-top: 35px; font:bold 16px/100% Arial, sans-serif;}
See example: jsfiddle
In your css reference you have:
.circle {font:bold 16px/100px Arial, sans-serif;}
The 100px refers to line-height, 100px is a lot. I suggest you to use 100% percentage for this case.
The <br> is for forcing a line break. You can remove if you want, but then you'll have to add more padding top, and reduce height.
you can use hover property to display content before or after
<!DOCTYPE html>
<html>
<head>
<style>
p:before
{
content:"Read this -";
}
</style>
</head>
<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>
<b>Note:</b> For the content property to work in IE8, a DOCTYPE must be declared.
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
a.hovertext {
position: relative;
width: 500px;
text-decoration: none !important;
text-align: center;
}
a.hovertext:after {
content: attr(title);
position: absolute;
left: 0;
bottom: 0;
padding: 0.5em 20px;
width: 460px;
background: rgba(0,0,0,0.8);
text-decoration: none !important;
color: #fff;
opacity: 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
}
a.hovertext:hover:after, a.hovertext:focus:after {
opacity: 1.0;
}
</style>
</head>
<body>
<p><a class="hovertext" href="#" title="LEARN MORE"><img id="a" src="buttonImage.png" width="500" height="309" border="0" alt=""></a></p>
</body>
</html>
I'm attempting to recreate the shadow from the image below:
It's the shadow between the two colors I'm trying to recreate using box-shadow. But I can't figure it out.
Here's my code:
box-shadow: inset 0 0 2px 0px #000000;
The shadow appears on both sides and is too strong compared to what I'm trying to achieve. Any suggestions?
I've made the below fiddle from complete scratch, you can use it if you like it
Demo
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
.one {
background: #B4B300;
height: 100px;
}
.two {
background: #FD370A;
height: 100px;
box-shadow: 0 0 5px #212121;
}
.three {
background: #fff;
height: 5px;
}
Instead of using inset shadow, am using a shadow which renders from all sides, right left are hidden as the div spans entire row, the shadow at the bottom is hidden with another div using background: #fff;
Note: I forgot to add -moz and -webkit prefixes so be sure you use
them if you want to support the older browsers too.
http://jsfiddle.net/CQvBb/
<div class="first"></div>
<div class="second"></div>
.first {
background:#B4B300;
width:500px;
height:100px;
box-shadow: inset 0 -5px 5px -5px #000000;
-moz-box-shadow: inset 0 -5px 5px -5px #000000;
-webkit-box-shadow: inset 0 -5px 5px -5px #000000;
}
.second {
background:#FD370A;
width:500px;
height:100px;
}
I am trying to create an object with a drop shadow. I believe you need CSS3 to do this and I have something like this so far.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Add box shadows:
#thediv
{
width:300px;
height:100px;
-moz-box-shadow: 10px 10px 5px #888; /* firefox shadows*/
-webkit-box-shadow: 10px 10px 5px #888; /* chrome / safari shadows */
box-shadow: 10px 10px 5px #888; /* general browser support */
}
example on this fiddle but as a note, as this is CSS3 and IE6/7 are old, it will not work with them.
Add this style into your div tag
-moz-box-shadow: 10px 10px 5px #888888;
/* Firefox 3.6 and earlier */
box-shadow: 20px 20px 55px #888888;
This simple code is not working in Chrome or Safari...
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<style>
:required {box-shadow:0 0 5px red;}
</style>
<body>
<form>
<textarea required></textarea>
</form>
</body>
</html>
It works just fine in Firefox and Opera. Also, border:1px solid red works just fine in webkit browsers. What's the deal? I even tried textarea {display:block;} thinking that it could have been an inline issue.
You need to add
-webkit-appearance: none;
to force the awesome webkit render textarea as an ordinary block and apply all the CSS you write.
See jsfiddle
If you give the textarea a background declaration of none (or a background-color declaration for some reason anything except white) the shadow will work.
<style>
:required {
background: none;
box-shadow:0 0 5px red;
}
</style>
Try this
textarea:required {
box-shadow: 0 0 5px red;
-webkit-box-shadow: 0 0 5px red;
-moz-box-shadow: 0 0 5px red;
border: solid 0px transparent; // or border: none;
}
DEMO. and Read this.
try selecting the Textarea via a class or id instead of the :required selector