When I try to use "grid-template-columns" and "grid-column-gap" a green line appears under them and says it's not a known CSS 3 property. Also, IE and Firefox cant compile the site well. My IDE is visual studio 2015 here comes my code:
.gridContainer{
display:grid;
grid-template-columns:1fr 1fr 1fr;
padding-top:150px;
grid-column-gap: 50px;
padding-bottom:150px;
}
.grid-item {
background-color: #99e4f5;
border: 1px solid rgba(0, 0, 0, 0.8);
font-size: 17px;
text-align: center;
border: 5px solid #ffffff;
box-shadow: 1px 1px 5px grey;
color: #676363;
Are there any alternatives to using?
thanks,
Saeed
Related
I have two types of circles, one inside of .poi.licensed and one inside of .poi.unlicensed. I am trying to make it so that the .circle inside of .poi.unlicensed has a $tangerine border instead of $turqoise. How can I used the trailing amerpsand to do so in this situation. Keep in mind that there is a lot of other scss that I am excluding that is unrelated, so it has to stay in this general structure.
I was trying something along the lines of the following, but it compiles to .unlicensed #licensed-v-unlicensed .poi .circle {}
$turqoise: #40e8e3;
$tangerine: #ffa975;
#licensed-v-unlicensed {
.poi {
.circle {
border: 5px solid transparentize($turqoise, 0.1);
.unlicensed & {
border: 5px solid transparentize($tangerine, 0.1);
}
#include breakpoint(medium up) {
border-width: 10px;
}
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}
}
}
I ended up using a trick I found on this blog, which was to use #at-root in order to start at the root and target the .unlicensed class. It's a lot more work than I had hoped to do, but the only solution discovered thus far.
$turqoise: #40e8e3;
$tangerine: #ffa975;
#licensed-v-unlicensed {
.poi {
.circle {
border: 5px solid transparentize($turqoise, 0.1);
#at-root #licensed-v-unlicensed .poi.unlicensed .circle {
border: 5px solid transparentize($tangerine, 0.1);
}
#include breakpoint(medium up) {
border-width: 10px;
}
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}
}
}
I have a trouble that I can't solve in a blog of WordPress. I don't know if it's bug or they are in confilcts. Firstly, see the image:
http://i.imgur.com/K4gWjh9.png
Notice the 3D rounded border and the white and black shadow in this image. This image is above the author avatar image's box. I can't correct it. See the example of JSFiddle:
http://jsfiddle.net/ZUben/
I use the Graphene theme for Wordpress the which is updated:
http://www.khairul-syahir.com/wordpress-dev/graphene-theme#.UXCgoivwLRY
Follow my styles:
.gutter-right {
margin-right: 10px;
}
...
.post-avatar-wrap {
float: right;
width: 48px;
height: 48px;
background: #fff center;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
-webkit-box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
margin-top: -10px;
}
...
.author-avatar-wrap {
width: 48px;
height: 48px;
background: #fff center;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
-webkit-box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
box-shadow: 1px 3px 1px rgba(255,255,255,0.35), inset 0px 3px 5px rgba(0,0,0,1);
margin-top: -10px;
}
Thank you!
Okay, here we go: set the image relative and also apply a z-index for this image which is lower than the z-index of the wrapper. Moreover we will have to apply the CSS3 border-styles to both, div and img.
So go and take a look at my fork of your fiddle: http://jsfiddle.net/ShwkP/
I've also created a separate class called border-styles in case we will have more elements with the same effect. Simply apply it to all elements to get this kind of border.
Remembar that this is CSS3 and will not work cross browsers, because neither border-radius nor box-shadow is fully supported!
I just can't figure this out. The links below work absolutely fine in every browser except IE8. If you click on the elements in IE8, the button disappears. If you click again where it was it reappears. But no amount of clicking will actually lead you to the href location. Can anybody explain to me why that might be? I've exhausted all of my thoughts and it still doesn't work. Many thanks for all your thoughts!
The html...
<div style="padding:0px 0px 30px 0px; clear: both;">
<div style="width: 50%; display: block; float: left;">
Learn More
</div>
<div style="width: 50%; display: block; float: left;">
Get Started
</div>
</div>
...and the stylesheet...
.big_button {
-moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
box-shadow: inset 0px 1px 0px 0px #bbdaf7;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff
), color-stop(1, #378de5) );
background: -moz-linear-gradient(center top, #79bbff 5%, #378de5 100%);
filter: progid : DXImageTransform.Microsoft.gradient (
startColorstr = '#79bbff', endColorstr = '#378de5' );
background-color: #79bbff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #84bbf3;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 18px;
font-weight: bold;
padding: 15px 45px;
text-decoration: none;
margin-left: 130px;
}
.big_button:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background: -moz-linear-gradient(center top, #378de5 5%, #79bbff 100%);
filter: progid : DXImageTransform.Microsoft.gradient (startColorstr = '#378de5', endColorstr = '#79bbff' );
background-color: #378de5;
}
.big_button:active {
position: relative;
top: 1px;
}
Its because of the 'filter:' part in your css, remove it, then it will work...
I just figured it out. IE8 seems to have a problem with :active in css. So the following section of the stylesheet was causing issues:
.big_button:active {
position: relative;
top: 1px;
}
Current fix is to exclude the ':active' part of the css for the button as it's not essential. If anybody has any further information on why IE8 has issues with :active, I'd be interested to know about it.
i have this code:
<style type="text/css">
div {
margin: 100px auto;
width: 0px;
height: 0px;
border-right: 30px solid transparent;
border-top: 30px solid red;
border-left: 30px solid red;
border-bottom: 30px solid transparent;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
position: relative;
}
</style>
<div></div>
that produce:
in firefox,
but in chrome (linux, and windows - didnt try in mac) i see nothing why?
I believe it is some sort of bug, actually. It works for me if you change the height and width to 1px. This leaves a little white dot, unfortunately, but that can be fixed by changing the background to red and the background-clip to content.
JSFiddle example.
Because you gave 0px width and 0px height to the div so you see nothing.
width: 0px;
height: 0px;
Change this, hope it'll be visible.
Is there a way to make an outer glow in Firefox using a CSS :focus rule? (similar to what Chrome already has)
You could add a -moz-box-shadow (or just box-shadow if you are only interested in Firefox 4 and later) for your :focus rule. You can add glow of various degrees using that.
You can do the same thing like this:
HTML:
<button id="a">click</button>
CSS:
button{
background:#f7f7f7;padding: 0 .5em;
height: 2.0833em;
border: 1px solid #CCC;
color: black;
background: #F6F6F6;
background-image: -moz-linear-gradient(top,white,#EFEFEF);
background-image: -webkit-gradient(linear,left top,left bottom,from(white),to(#EFEFEF));
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=white,endColorStr=#EFEFEF);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
overflow: visible;}
button:hover{
box-shadow:0 0px 3px #999;
-webkit-box-shadow:0 0px 3px #999;
-moz-box-shadow:0 0px 3px #999;
}
Check on jsfiddle: http://jsfiddle.net/naveed_ahmad/LZGq6/
This can be done by multiple shadows:
CSS
color: #000;
background: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;
see example 5.5:
http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/