Do someone know why, in Chrome, I can't see this before elements and in Firefox everything is fine ? I don't know what other information should I add here to make it more understandable.
div.control-2 {
position: absolute;
margin-top: 70px;
margin-left: 146px;
}
div.control-2:before
{
position: absolute;
content: '';
width: 10px;
height: 1px;
display: inline-block;
background: rgba(0,0,0,0.8);
left: 0;
margin-left: -40px;
margin-top: 10px;
box-shadow:0 1px 1px rgba(255,255,255,0.15),
0 60px 0 rgba(0,0,0,0.8),
0 61px 1px rgba(255,255,255,0.15),
0 120px 0 rgba(0,0,0,0.8),
0 121px 1px rgba(255,255,255,0.15),
0 180px 0 rgba(0,0,0,0.8),
0 181px 1px rgba(255,255,255,0.15);
}
<div class="control-2">Html Content</div>
Related
Is there a way to convert this box shadow into a drop shadow?
box-shadow: inset 0 0 0.32vw 0.2vw #0a0e0f40;
I'd like to achieve something like this, but with drop-shadow:
.card {
background: #fff;
border-radius: 2vw;
display: inline-block;
height: 300px;
margin: 1rem;
position: relative;
width: 300px;
box-shadow: inset 0 0 2vw 0.4vw #0a0e0f40;
}
body {
background: #e2e1e0;
text-align: center;
}
<div class="card card-1"></div>
drop-shadow() does not have an inset and spread-radius, so no.
See https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow and https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()
Unless you mean just removing the inset property...
#yoda {
width: 100px;
height: 100px;
margin: 3px;
background: darkgreen;
box-shadow: 0 0 0.32vw 0.2vw #0a0e0f40;
}
#spongebob {
width: 100px;
height: 100px;
margin: 3px;
background: yellow;
box-shadow: 0.4vw 0.4vw 0.32vw 0.2vw #0a0e0f40;
}
<div id="yoda"></div>
<div id="spongebob"></div>
I have a div that i don't know how to allign to the bottom of its parent.
I tried with bottom: 0 and margin-bottom: 0 but both doesn't work. I played with position aswell and it doesn't change anything only the absolute position makes the div stick to the very bottom of the page. Vertical-align doesn't seem to work aswell.
Here's a simplified version of my code:
.category{
height: 70px !important;
width: 28% !important;
margin: 0 10px 0 10px;
border: 1px solid #3A94D7;
border-radius: 15px;
box-shadow: 0 0 15px 1px rgba(0,0,0,.75), inset 0 0 2px 0 #4293D5;
}
.icon-steam{
background: url(../img/steam.png) 50% 50% no-repeat;
background-size: 40px;
float: left;
width: 40px;
height: 40px;
margin-right: 0.3em;
}
.platform{
text-shadow: none;
color: #65a1bf;
text-align: center;
bottom: 0;
position: relative;
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="categories">
<div class="category icon-steam"><div class="platform">Steam</div></div>
</div>
And there's a fiddle link if you want: https://jsfiddle.net/kk8Lwh6v/
Can someone help me please?
Add position:absolute on the element that you want to align and add position:relative on its parent.
.category {
height: 70px !important;
width: 28% !important;
margin: 0 10px 0 10px;
border: 1px solid #3A94D7;
border-radius: 15px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, .75), inset 0 0 2px 0 #4293D5;
position: relative;
}
.icon-steam {
background: url(../img/steam.png) 50% 50% no-repeat;
background-size: 40px;
float: left;
width: 40px;
height: 40px;
margin-right: 0.3em;
}
.platform {
width: 100%;
text-shadow: none;
color: #65a1bf;
text-align: center;
bottom: 0;
position: absolute;
margin-bottom: 0;
}
<div class="categories">
<div class="category icon-steam">
<div class="platform">Steam</div>
</div>
</div>
You can use flexbox properties:
.category {
height: 70px !important;
width: 28% !important;
margin: 0 10px 0 10px;
border: 1px solid #3A94D7;
border-radius: 15px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, .75), inset 0 0 2px 0 #4293D5;
}
.icon-steam {
background: url(../img/steam.png) 50% 50% no-repeat;
background-size: 40px;
float: left;
width: 40px;
height: 40px;
margin-right: 0.3em;
display: flex;
justify-content: center;
}
.platform {
text-shadow: none;
color: #65a1bf;
margin-top: auto;
}
<div class="categories">
<div class="category icon-steam">
<div class="platform">Steam</div>
</div>
</div>
This will do.
.category{
height: 70px !important;
width: 28% !important;
margin: 0 10px 0 10px;
border: 1px solid #3A94D7;
border-radius: 15px;
box-shadow: 0 0 15px 1px rgba(0,0,0,.75), inset 0 0 2px 0 #4293D5;
}
.icon-steam{
background: url(../img/steam.png) 50% 50% no-repeat;
background-size: 40px;
float: left;
width: 40px;
height: 40px;
margin-right: 0.3em;
}
.platform{
text-shadow: none;
color: #65a1bf;
left:14%;
top:60px;
position: absolute;
}
<div class="categories">
<div class="category icon-steam"><div class="platform">Steam</div></div>
</div>
.category{
height: 70px !important;
width: 28% !important;
margin: 0 10px 0 10px;
border: 1px solid #3A94D7;
border-radius: 15px;
box-shadow: 0 0 15px 1px rgba(0,0,0,.75), inset 0 0 2px 0 #4293D5;
}
.icon-steam{
background: url(../img/steam.png) 50% 50% no-repeat;
background-size: 40px;
float: left;
width: 40px;
height: 40px;
margin-right: 0.3em;
}
.platform{
text-shadow: none;
color: #65a1bf;
text-align: center;
top: 60px;
left:14%;
position: absolute;
margin-bottom: 0;
}
<div class="categories">
<div class="category icon-steam"><div class="platform">Steam</div></div>
</div>
I am trying to do something like this image below with CSS to build the buttons and then an image sprite to show the center content of the button.
Here is a demo of the code I have so far, I am having trouble getting my sprite images to position correctly. Any help to improve this CSS to look more like my image above would be great. I think the actual HTML structure could be improved as well?
http://dabblet.com/gist/2212456
HTML
<div class="switch-wrapper">
<div class="switcher left selected">
<span id="left">...</span>
</div>
<div class="switcher right">
<span id="right">...</span>
</div>
</div>
CSS
/* begin button styles */
.switch-wrapper{
width:400px;
margin:220px;
}
.switcher {
background:#507190;
vertical-align: bottom;
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -0px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -17px;
}
.left{
border-radius: 6px 0px 0px 6px;
width: 45px; height: 38px;
}
.right{
border-radius: 0 6px 6px 0;
width: 45px; height: 38px;
margin: 0 0 0 -6px
}
.switcher:hover,
.selected {
background: #27394b;
box-shadow: -1px 1px 0px rgba(255,255,255,.4),
inset 0 4px 5px rgba(0,0,0,.6),
inset 0 1px 2px rgba(0,0,0,.6);
}
.switcher::after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 0px #1B1B1B;
border-radius: 6px;
}
Block & inline method
http://dabblet.com/gist/2213271
Absolute method
http://dabblet.com/gist/2213121
Hi you have not defined the position absolute in #left & #right so i controlled the sprite images through absolute positioned.
you can adjust your images through changes in position top,left,bottom,right whatever you need....
Here is your updated css :-
.switch-wrapper{
width:400px;
margin:220px;
}
.switcher {
background:#507190;
vertical-align: bottom;
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -0px;
background-position: 16px -16px;
height: 15px;
left: 15px;
position: absolute;
top: 12px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -17px;
background-position: 0 -29px;
left: 15px;
position: absolute;
top: 13px;
}
.left{
border-radius: 6px 0px 0px 6px;
width: 45px; height: 38px;
}
.right{
border-radius: 0 6px 6px 0;
width: 45px; height: 38px;
margin: 0 0 0 -6px
}
.switcher:hover,
.selected {
background: #27394b;
box-shadow: -1px 1px 0px rgba(255,255,255,.4),
inset 0 4px 5px rgba(0,0,0,.6),
inset 0 1px 2px rgba(0,0,0,.6);
}
.switcher::after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 0px #1B1B1B;
border-radius: 6px;
}
or see the live demo:- http://dabblet.com/gist/2213048
I am trying to make shutdown button using CSS3 similar to this picture
http://static.desktopnexus.com/thumbnails/25080-bigthumbnail.jpg
So far I got this. The issues are that I cannot make that "semi-circle" look like that circle in the center of image, cannot center that "semi-circle" and box-shadow ruins that "semi-circle".
Do you have any suggestions to improve what I am trying to do?
Thnx in advance!
Here's my attempt:
.shutdown {
border: 8px solid #0cf;
border-radius: 100px;
box-shadow: 0 0 10px #0cf, inset 0 0 10px #0cf;
height: 100px;
width: 100px;
}
.shutdown .inner {
border: 5px solid #0cf;
border-radius: 100px;
box-shadow: 0 0 10px #0cf, inset 0 0 10px #0cf;
height: 30px;
left: 30px;
position: relative;
top: 30px;
width: 30px;
}
.shutdown .bar {
border-left: 5px solid #0cf;
box-shadow: 0 0 10px #0cf;
height: 20px;
left: 47px;
position: relative;
top: -15px;
width: 0;
}
.shutdown .sub-bar {
border-left: 11px solid black;
height: 30px;
margin-left: 44px;
margin-top: -20px;
position: absolute;
width: 0;
}
Here's the HTML structure to go along with it:
<div class="shutdown">
<div class="inner"></div>
<div class="sub-bar"></div>
<div class="bar"></div>
</div>
And here's a demo.
I have a poll setup using a script to pull it into my WP page. Via http://quipol.com/
EG <script src="poolfromquipol">
I've found the styles via firebug and have customized them accordingly within, but I'm wondering if there's a way I could implement them for the styles to actually take effect?
Here's what I'm trying to do:
#quipol-container #quipol {
-moz-border-radius: 4px 4px 4px 4px;
-moz-box-shadow: 0 0 0 1px #FFFFFF inset;
background: none repeat scroll 0 0 white;
border: 0 none;
height: 464px;
margin: 0;
padding: 14px 14px 0;
position: relative;
width: 360px;
}
#quipol-container #quipol #quipol-corner {
background: none repeat scroll 0 0 transparent;
height: 65px;
left: -6px;
position: absolute;
top: -6px;
width: 65px;
z-index: 1000;
}
#quipol-container #quipol #quipol-corner a {
background: none;
display: none;
height: 21px;
margin: 9px 0 0 10px;
opacity: 1;
text-indent: -9999px;
width: 21px;
}
#quipol-container {
-moz-border-radius: 8px 8px 8px 8px;
-moz-box-shadow: 0 0 0 1px #FFFFFF inset;
background: none;
border: none;
height: 590px;
margin: 0 auto;
padding: 4px;
position: relative;
width: 390px;
}
Anybody know how / where I can display: none some of the default styles?
They appear to be generating iframes to display the poll in. You will not be able to style the iframe (nor access it via JavaScript), as it's being accessed cross-domain.
This is often intentional, as they usually don't want you display:noneing their logos.