CSS
.ts-learn-img figure:hover{
-moz-box-shadow: inset 0 0 20px #000000;
-webkit-box-shadow: inset 0 0 20px #000000;
box-shadow: inset 0 0 20px #000000;
}
HTML:
<div class="wp-block-image ts-learn-img">
<figure class="aligncenter size-medium is-resized">
<a href="https">
<img src="https" alt="" class="wp-image-4076" width="225" height="60" srcset="https">
</a>
</figure>
</div>
This is a standard image block in Wordpress (Gutenberg) with a class specified for the block (ts-learn-img). I am trying to add a shadow around the image when the mouse hovers over it. But I am getting:
It is only adding a shadow on the base line. Now, I have tried using in the CSS:
.ts-learn-img figure a img:hover
And it made no difference. Is it not possible to have a complete shading of some kind when the mouse hovers over the image?
The actual webpage is here.
Based on the comments provided, the following steps were required:
I had to remove the excess transparency from around the image so that it was just the button.
I had to make changes to the CSS styles as follows:
.ts-learn-img figure {
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;
border-radius: 5px !important;
}
.ts-learn-img img {
display: block;
}
.ts-learn-img figure:hover{
-moz-box-shadow: 0px 10px 20px #000;
-webkit-box-shadow: 0px 10px 20px #000;
box-shadow: 0px 10px 20px #000;
}
Now it looks much better!
Related
I learned I can use :hover:after so I tried it myself, however it is not working:
.img-shadow img:hover:after {
-webkit-box-shadow: inset 10px 10px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 10px 10px 0px rgba(0,0,0,0.75);
box-shadow: inset 10px 10px 10px 0px rgba(0,0,0,0.75);
}
<div class="wpb_single_image wpb_content_element vc_align_left img-shadow">
<figure class="wpb_wrapper vc_figure">
<img width="100%" height="auto" src="http://dev.watmar.com.au/wp-content/uploads/2020/10/Power_generation.jpg">
</figure>
</div>
What are you trying to do actually here? If your aim is to use pseudo-element then you can use it to add content before and after through, ::before & ::after. Single colon for pseudo class, double colon for pseudo element. If in the above your aim is to add shadow you can add it directly, you need not use any pseudo-element for that. By using inset you can't see the shadow because it is inner side which is not visible, remove inset to see the shadow outside the image.
Hello
Dear If you use :after pseudo selector you should use
content: "";
position: absolute;
width: 100%;
height: 100%;
and its parent tag must use
position: relative;
but in your selected tag is not possible
position: relative;
in this case If you want to use
box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.75);
You should must use padding inside the element, other wise you can not see the box-shadow.
For more Help you can visit this
Demo
I can try to give you full support.
.img-shadow img {
transition: all 0.5s;
padding: 20px;
}
.img-shadow img:hover {
-webkit-box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 10px 10px rgba(0,0,0,0.75);
}
<div class="wpb_single_image wpb_content_element vc_align_left img-shadow">
<figure class="wpb_wrapper vc_figure">
<img width="100%" height="auto" src="http://dev.watmar.com.au/wp-content/uploads/2020/10/Power_generation.jpg">
</figure>
</div>
I have some nicely styled CSS submit buttons, but the margin attribute doesn't seem to be working when two buttons fall side by side. Please see my image sample, below.
The buttons simply fall into a single div, like so:
<div>
<input type="submit" value="Confirm My Order.">
<input type="submit" value="Revise My Order.">
</div>
Here is the CSS:
input[type=submit]{
margin:0.6em,2em,1em,1em; /* Right margin (2nd value) is not working */
background: #808080;
padding: 5px 12px; /* padding inside the button */
border:1px solid #808080;
cursor:pointer;
-webkit-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
box-shadow: inset 0px 1px 0px #808080, 3px 5px 0px 0px #696969, 5px 10px 5px #999;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
color:#fff;
}
Given the right margin, I wouldn't think that the buttons would kiss like this. Any thoughts why the margin may not be working?
My thanks to you in advance.
If you inspect it using chrome devtools or similar, you will see that it notifies you of "Invalid Property Value". This is due to a syntax error. You want your css to be this
input[type=submit]{
margin:0.6em 2em 1em 1em; /* Right margin (2nd value) is now working */
The rest should be fine
Same as answer given but an explanation that is better.
When using multiple inputs into the margin css, you don't want to use the commas a simple space between each value is what's required.
input[type=submit]{
margin:0.6em 2em 1em 1em;
}
For further explanations on margins view this helpful link:
https://developer.mozilla.org/en-US/docs/Web/CSS/margin
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've found cool article http://www.tripwiremagazine.com/2012/01/how-to-create-a-seach-bar-in-photoshop.html recently. Don't know how to handle background images inside responsive grid. How do I make such a search bar using Zurb Foundation grid? Is it possible?
Thanks!
The search bar in the design could be styled completely with CSS and then you wouldn't have to use background images at all. Here are a few main points of code that would make this work:
HTML:
<div class="input-container">
<input type="text" />
<button>Search</button>
</div>
The text input:
input[type="text"] {
box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
border-radius: 5px;
background-color: #fff;
}
the button:
button {
margin-left: -10%;
background-image: -webkit-linear-gradient(top, #117a03 0%,#287c15 100%);
border-radius: 0 5px 5px 0;
height: 32px;
padding: 0 5px;
border: 1px solid #bbb;
box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 1px #fff;
color: #074F03;
text-shadow: 0px 1px #ccc;
font-weight: bold;
}
You need to add the vendor prefixes for CSS3 properties, but this is a pretty basic starting point and should give you everything you need. Here's a fiddle with it working: http://jsfiddle.net/J6Dvz/
Does anyone know the CSS required to add an outer border around textboxes like this example from Twitter?
Thanks for the help
outline:
input{outline:solid 4px #ccc}
(another option it to wrap the input with div of course)
You can use the box-shadow property
http://jsfiddle.net/VXJdV/
input {
display: block;
margin: 2em;
box-shadow: 0 0 10px gray;
}
input[type="text"],input[type="password"]{
border: solid 1px #ccc;
padding: 4px;
border-radius:4px;
}
You'll want to cover the other border radius too, -moz- & -webkit-
Demo: http://jsfiddle.net/BqpZh/
.classname
{
box-shadow:0 0 2px red
}
use this class or you and add box-shadow property to your existing class. You can increase 2px to 5px or 10 for broder shadow
.front-card .text-input:focus {
border:1px solid #56b4ef;
-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
-moz-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6);
box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6)
}
Using box shadow will help you like this:
class{
box-shadow: horizontal vertical blur-radius spread-radius color;
box-shadow:2px 0 3px 5px red;
}
horizontal (-value will move towards left) (+value on right)
vertical (-value will move upwards) (+value on downwords)
blur-radius: will blur the color you choose around box
spread-radius: will spread color to the chosen distance
You can use a wrapping div outside of the input box and give it that background color and rounded corners!
HTML:
<div class="outter"><input class="inputbox"></input></div>
CSS:
.outter {
margin: 20px;
padding: 10px;
border-radius: 15px;
background-color: red;
display: inline-block;
}
.inputbox {
border-radius: 5px;
}
Here you have a jsfiddle: http://jsfiddle.net/dsBgw/
You can consider using multiple shadows:
input[type="text"]{
box-shadow: 0 2px 2px rgba(0,0,0,0.2),
0 1px 5px rgba(0,0,0,0.2),
0 0 0 12px rgba(255,255,255,0.4);
}
i have a demo, it it like the login form for twitter. if you want to view, pls click here.