i am trying to create a moon with light glow. same as in images.
i have tried but not much successful.
I don't wants to use image in website. i wants to create only this with CSS3.
My circle is creating very small and also glow is in small area . i want glow in large radius area
http://jsfiddle.net/naresh_kumar/ezUfG/6/
Html
<div>
<span>Glow</span>
</div>
Css
div {
margin: 20px 10px 10px;
text-align: center;
font-family: sans-serif;
}
span {
display: inline-block;
padding-top: 40px;
background: whiteSmoke;
width: 100px;
height: 60px;
text-align: center;
vertical-align: middle;
-webkit-box-shadow: 0 0 10px #F8A50E;
-moz-box-shadow: 0 0 10px #F8A50E;
box-shadow: 0 0 10px #F8A50E;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition: box-shadow .4s ease;
-moz-transition: box-shadow .4s ease;
-ms-transition: box-shadow .4s ease;
-o-transition: box-shadow .4s ease;
transition: box-shadow .4s ease;
}
span:hover {
-webkit-box-shadow: 0 0 10px red;
-moz-box-shadow: 0 0 10px red;
box-shadow: 0 0 0 10px red;
}
use box-shadow :)
This example uses two comma separated shadows:
box-shadow:0 0 50px gold,0 0 150px gold;
http://codepen.io/gcyrillus/pen/qdcos
You could draw it with radial-gradient too.
Result will varie from browser to browser.
I believe this is what you want:
span:hover {
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
-webkit-box-shadow:0px 0px 10px red;
-moz-box-shadow: 0px 0px 10px red;
box-shadow: 0px 0px 10px red;
}
Demo: http://jsfiddle.net/ezUfG/10/
Instead of this style for your box-shadow:
box-shadow: 0 0 0 10px red;
Try this:
box-shadow: 0 0 10px red;
Edit: If you want the glow to be bigger, just increase the radius:
box-shadow: 0 0 30px red;
jsFiddle here
Related
So i have this div and I want to smoothly scale it on hover. Everything goes well and it gets bigger smoothly. After I move my mouse away, however, it just instantly returns to it's normal state without a smooth transition.
.dashboardInfoBox {
width: 190px;
display: flex;
height: 120px;
background-color: red;
border-radius: 10px;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
padding: 11px 17px;
flex-direction: column;
justify-content: space-around;
}
.dashboardInfoBox:hover {
transform: scale(1.5);
transition: 0.2s linear;
}
<div class="dashboardInfoBox">
test text
</div>
I have no idea how to force the transition to go both ways... Would appreciate any advice!enter code here
You have to give the parent element dashboardInfoBoxthe transition property, that should fix the Problem :)
Instead of having the transition in your hover state (.dashboardInfoBox:hover), move it into your regular class (.dashboardInfoBox).
What happens is that your transition works only when you're hovering over the element.
.dashboardInfoBox {
width: 190px;
display: flex;
height: 120px;
background-color: red;
border-radius: 10px;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
padding: 11px 17px;
flex-direction: column;
justify-content: space-around;
transition: 0.2s linear;
}
.dashboardInfoBox:hover {
transform: scale(1.5);
}
This is my CSS code and it works fine on android and PC Browser but not Iphone
.button{
color: #fff !important;
text-transform: uppercase;
text-decoration: none;
background: #4A5D88 ;
padding: 5px 40px 5px 40px;
border-radius: 20px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
}
.button:hover{
text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}
this is how it works every where but not on Iphone
Add this line and it should work normally.
-webkit-appearance: none;
How do i center a main DIV, within which contains another div that has an inline-block.
<div class="newdiv>
<div class="pinterest-hover social-slide"></div>
<div class="instagram-hover social-slide"></div>
<div class="reddit-hover social-slide"></div>
<div class="rss-hover social-slide"></div>
</div>
CSS:
.stumbleupon-hover {
background-image: url('icons/stumbleupon-hover.png');
}
.social-slide {
height: 48px;
width: 48px;
border:3px solid;
/*margin: 10px;*/
display:inline-block;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-slide:hover {
background-position: 0px -48px;
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3)
/*box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.8);*/
}
div.newdiv {
margin: 0 auto 0 auto;
}
Basically I want to center the social icons via newdiv
JSFiddle: http://jsfiddle.net/uWaPy/
Use :
div.new-div {
text-align:center;
}
You had a missing " in the div.new-div.
See updated fiddle.
IE < 8 doesn't like inline-block, there's a hack :
.social-slide {
display:inline-block;
*display:inline;
*zoom:1;
}
.newdiv
{
margin-left: auto;
margin-right: auto;
width:900px;
}
add text-align:center; to div.newdiv
Also you are missing a " in your html.
<div class="newdiv>
should be:
<div class="newdiv">
div.newdiv {
margin: 0 auto;
text-align: center;
width: 1000px;
}
just edit this code. And in your div tag, it should be <div class="newdiv">
So this is the code I'm working on:
HTML
<div id="t_welcomesection">
<h1>Hello World!</h1>
<p>Lorem Ipsum.
<div class="morebtn">More >>
</div>
</p>
</div>
<!-- end of welcomesection -->
CSS
.morebtn {
color: #FFF;
background-color: rgba(219,87,5,1);
font-size: 17px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
width: 100px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.morebtn:active {
color: #FFF;
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
}
#t_welcomesection {
float: left;
width: 800px;
text-align: justify;
padding: 0px 50px 30px 50px;
}
See working sample here
I want the button to be next to the text. I don't know what's wrong with the code I have. Help is much appreciated. Thanks.
#t_welcomesection p {
display: inline-block;
}
.morebtn {
display: inline-block;
}
You've got div (a block element) inside a p. Just use span instead of div:
Demo
You cannot have div nested inside a p tag as p can only hold inline elements, make your div a span and assign display: inline-block; to the span element
Demo
I made a form for a site and all textboxes have rounded corners except the select drop down box. I made a rounded box style and it shows but the original square also shows behind it. Is there any way I can remove this so my is the only one that shows. I'll add the code
<td>Service Requested:
<select style="margin-left: 10px" name="service" tabindex="4">
<option value=" " selected="selected"> </option>
<option value="Residential Move">Residential Move*</option>
<option value="Commercial Move">Commercial Move*</option>
<option value="Storage Unit Loading">Storage Unit Loading</option>
<option value="Storage Unit Unloading">Storage Unit Unloading</option>
<option value="Furniture Consignment">Furniture Consignment</option>
<option value="Assembly/Removal">Assembly/Removal</option>
<option value="Landscaping">Landscaping</option>
<option value="Cleanout">Cleanout</option>
<option value="General Help">General Help</option>
</select>
</td>
and this is the entire css for the whole form. Just have at it
#searchbox {
padding-left: 190px;
padding-bottom:40px;
background: url(../images/border-dashed.gif) repeat-x left bottom;
}
#searchbox form {
margin: 0;
}
#searchbox table {
margin: 0;
}
#searchbox th, td {
text-align: left;
font-weight: normal;
color:#302f2f;
}
#searchbox .submitrow {
text-align: right;
}
#search {
}
#search input[type="text"] {
border: 2px solid #c1c2c3 ;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #302f2f;
width: 100px;
padding: 6px 15px 6px 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 150px;
}
#search select {
border: 2px solid #c1c2c3 ;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #302f2f;
width: 200px;
padding: 6px 15px 6px 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search select:focus {
width: 250px;
}
#search textarea {
border: 2px solid #c1c2c3 ;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #302f2f;
width: 300px;
padding: 6px 15px 6px 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search textarea:focus {
}
.contactwrapper {width:auto; height:200px; overflow:hidden;}
.extra-wrap {width:800px; overflow:hidden;}
.formbtn {
background: url(../images/formbtns.png) no-repeat;
background-position: 0 bottom;
color: #f1f2ea;
display: block;
line-height: 28px;
float:right;
margin-left:450px;
margin-bottom:40px;
height: 30px;
width: 100px;
margin: 48px 10px;
outline: 0;
text-align: center;
text-decoration: none;
}
.formbtn:hover {
background-position: 0 top;
}
thanks
The ability to style select boxes is inconsistent across browsers. Some of them respond well to CSS styling and some don't, but if you really want to have completely consistent control over it and its behavior, you need to make a faux-select that is powered by javascript.
Check out the Select2 control, it's nice.
Styling to a select box is chosen mostly by the browser and is not very customizable without javascript besides using a background image.
Since jQuery UI 1.8 there has been an autocomplete control that has a combobox functionality which replaces a select control.
I found an alternative, but not sure how it will behave with all browsers. But if you change the border property to inherit it will do it. At least in Chrome
border: 2px inherit #c1c2c3 ;