I am very new to Scss and I am trying to have some logic whereby when I hover on the a element I get an underlying bar to appear and if I select that element in the nav menu the bar stays fixed.
I have the following, but I do not seem to correctly nest the active action:
nav {
max-width:100%;
background: lightblue;
ul{
background: yellow;
li {
background: yellow;
text-align: center;
a {
color: red;
display: inline-block;
}
&:hover { background: linear-gradient(to top, green 4px, transparent 0); }
&:active { background: linear-gradient(to top, green 4px, transparent 0); }
}
}
}
Is that how I correctly use hover and active on the a element? Can you help? I am rather confused about it.
Thank you,
P.
Your :hover and :active selectors are related to li element. You should put these rules to a section.
nav {
max-width:100%;
background: lightblue;
ul{
background: yellow;
li {
background: yellow;
text-align: center;
a { // <a> starts here
color: red;
display: inline-block;
&:hover {
background: linear-gradient(to top, green 4px, transparent 0);
}
&:active {
background: linear-gradient(to top, green 4px, transparent 0);
}
} // and ends here
}
}
}
Related
I'm trying to style progress bars using SCSS. To get this working in both Webkit and Gecko browsers I need to use both -webkit and -moz prefixes:
progress {
height: 50px;
-webkit-appearance: none;
appearance: none;
background: cyan;
&::-moz-progress-bar,
&::-webkit-progress-value {
background-color: orange;
}
&::-webkit-progress-bar {
background-color: cyan;
}
}
which renders to
progress {
height: 50px;
-webkit-appearance: none;
appearance: none;
background: cyan;
}
progress::-moz-progress-bar, progress::-webkit-progress-value {
background-color: orange;
}
progress::-webkit-progress-bar {
background-color: cyan;
}
This works great in Firefox, but Chrome doesn't seem to like it. Compare the following two implementations:
Comma separated selectors
progress {
height: 50px;
-webkit-appearance: none;
appearance: none;
background: cyan;
}
progress::-moz-progress-bar, progress::-webkit-progress-value {
background-color: orange;
}
progress::-webkit-progress-bar {
background-color: cyan;
}
<progress max="1" value="0.5"></progress>
Entirely separate declarations
progress {
height: 50px;
-webkit-appearance: none;
appearance: none;
background: cyan;
}
progress::-webkit-progress-value {
background-color: orange;
}
progress::-moz-progress-bar {
background-color: orange;
}
progress::-webkit-progress-bar {
background-color: cyan;
}
<progress max="1" value="0.5"></progress>
The above code snippets render in Firefox and Chrome as shown below
Firefox
Chrome
comma separated
separate declarations
It seems like the problem comes from rendering the CSS with vendor-specific pseudos in comma-separated lists. Is there any way to force the SASS processor to render each selector in a comma separated list as its own declaration?
It would be nice to not use mix-ins, but if it's the only way it's the only way.
Yes, you are able to do so! If you want to render SASS to seperate CSS rules simply divide the comma seperated list into two seperate rules. SASS keeps different rules seperate and will not wrap them together. Example:
// ### > SASS
xprogress {
height: 50px;
appearance: none;
background: cyan;
//## divide comma seperated selectors
//## into different rules
&::-moz-progress-bar {
background-color: orange;
}
&::-webkit-progress-value {
background-color: orange;
}
&::-webkit-progress-bar {
background-color: cyan;
}
}
// ### > compiles to css
progress {
height: 50px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: cyan;
}
//## when compiling CSS
//## different rules will survive
progress::-moz-progress-bar {
background-color: orange;
}
progress::-webkit-progress-value {
background-color: orange;
}
progress::-webkit-progress-bar {
background-color: cyan;
}
I would like to achieve what i wrote in the title, simultaneously.
What i have is a div that is width:100% (container) and contains 4 images inside of a div, 25% each (grid), with a description layer inside (on) it - called desc, for the overall dimensions, and span, for the mere text.
Here is the CSS:
.grid-container {
width: 85%;
margin-left: auto;
margin-right: auto;
}
.grid {
width: 25%;
float: left;
position: relative;
}
.grid img {
border-radius: 50%;
transition: .4s -webkit-filter linear;
-webkit-transition: background .5s ease 50ms;
transition: background .5s ease 50ms;
}
.grid img:hover {
filter: url(filters.svg#grayscale);
/* Firefox 3.5+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(1);
/* Google Chrome & Safari 6+ */
background: rgba(168, 202, 217, .6)
}
.desc {
display: block;
position: absolute;
left: 26%;
width: 87%;
height: 100%;
top: 0%;
left: 0%;
border-radius: 50%;
}
.desc:hover {
background: rgba(168, 202, 217, .6)
}
.desc span {
width: 100%;
height: 100%;
text-align: center;
margin-top: 37%;
position: absolute;
left: 0;
top: 0;
font-size: 16px;
opacity: 0;
-webkit-transition: opacity .5s ease 50ms;
transition: opacity .5s ease 50ms;
color: #fff !important;
}
.desc span:hover {
opacity: 1;
}
So, what i want to achieve is to make the image go grayscale when hovered, while making the description visible. Description has a background color aswell (can i apply that to the image instead, along with the greyscale filter?)
The problem is that the description this way occupies the whole image, so the hover would be considered by the description only and not the image.
Any clues on how i can achieve what i want? Thanks for your attentio
Best regards
Simple, put both elements in the same container. For example,
.grid:hover img {
filter: url(filters.svg#grayscale);
}
.grid:hover .desc span {
opacity: 1;
}
If your description is an immediate following sibling of the image, you can use the immediate following-sibling selector:
.grid img:hover + .descr{display: block; background: whatever;}
(selects the element with the class="descr" once the mouse hovers over the image)
HTML structure for this to work:
<div>
<img>
<p class="descr">
</div>
I am very new to sass/compass and I am now experimenting with mixins. The example below shows the code for a simple ribbon style horizontal menu which is already inheriting #include horizontal-list mixin, bundled with compass.
This static menu has four list items and therefore I have set the li width as 25%
My question. Does Compass have a method for calculating an equal percentage width value for the list items in a dynamic menu with an undefined number of items?
Something like, Total li/100 = x% li width
#mixin ribbon-menu {
ul {
padding: 0;
}
li {
width: 25%;
border-right: 1px solid $white;
text-align: center;
}
li.last {
border-left: 0;
}
li.leaf {
padding: 0;
}
a {
display: block;
text-decoration: none;
padding: 10px;
color: $white;
}
a:link, a:visited {
background: $black;
}
a:active, a:hover, a:focus {
background: $red;
}
}
Hopefully this will help you.
http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
#for $i from 1 through 4 {
li:first-child:nth-last-child(#{$i}),
li:first-child:nth-last-child(#{$i}) ~ li {
width: 100% / $i }
}
I have a page here to illustrate my question
www.ttmt.org.uk/color
It's just blocks of color that have a base color and then I'm using sass to lighten and darken the colors form the center.
I have done it here by giving eavh div(color block) a class name and then referencing that name in the sass and lightening or darkening the base color.
It's a bit of sass so I was thinking is it possible to give lighten or darken a color without referencing that color in the sass statment
So instead of have
<div class="at-blue-lightest"></div>
//
at-blue{
background-color: $base-blue;
}
.at-blue-lightest{
background: lighten($base-blue, 30%);
}
I could have:
<div class="at-blue lightest"></div>
//
.at-blue{
background-color: $base-blue;
}
.lightest{
background: lighten( 30%);
}
So instead of referencing the color it would just lighten/darken what ever the color is.
This is all the sass
$base-blue: #267EC8;
$base-green: #00A504;
$base-red: #EA002A;
$base-gray: #aaaaaa;
.box{
height: 150px;
margin: 0 10px 10px 0;
width: 150px;
float: left;
}
.con{
overflow: auto;
}
.at-blue{
background-color: $base-blue;
}
.at-red{
background-color: $base-red;
}
.at-green{
background-color: $base-green;
}
.at-blue-lightest{
background: lighten($base-blue, 30%);
}
.at-blue-lighter{
background: lighten($base-blue, 20%);
}
.at-blue-light{
background: lighten($base-blue, 10%);
}
.at-blue-dark{
background: darken($base-blue, 10%);
}
.at-blue-darker{
background: darken($base-blue, 20%);
}
.at-blue-darkest{
background: darken($base-blue, 30%);
}
.at-red-lightest{
background: lighten($base-red, 30%);
}
.at-red-lighter{
background: lighten($base-red, 20%);
}
.at-red-light{
background: lighten($base-red, 10%);
}
.at-red-dark{
background: darken($base-red, 10%);
}
.at-red-darker{
background: darken($base-red, 20%);
}
.at-red-darkest{
background: darken($base-red, 30%);
}
.at-green-lightest{
background: lighten($base-green, 30%);
}
.at-green-lighter{
background: lighten($base-green, 20%);
}
.at-green-light{
background: lighten($base-green, 10%);
}
.at-green-dark{
background: darken($base-green, 10%);
}
.at-green-darker{
background: darken($base-green, 20%);
}
.at-green-darkest{
background: darken($base-, 30%);
}
Sass always compiles to CSS, so if there's no way that CSS can do it, neither can Sass. There's no way that CSS can know what's underneath a given element; since that depends on the HTML delivered to the page too.
However, you can just use CSS's more advanced color value specifications, which include semi-transparent functionality with RGBA and HSLA. For example:
background: rgba(255, 255, 255, .25);
is white that's 25% transparent. Thus it will lighten whatever is behind it by 25%.
background-color: darken($black-blue, 10%);
Example site
I have a site divided into your usual vertical sections. Header and footer both contain backgrounds with background-attachment: fixed. I have a slide-out nav, which you can see is activated on the first link. Everything works dandy except...
Issue:
Safari 6 (I'm not sure about 5.1, but it seems to be on Mac as my Windows Safari doesn't have the issue) has a nasty flicker upon animation. This can be resolved with the usual -webkit-backface hack HOWEVER upon using this, a new problem arises. The fixed background images start behaving very badly, and if you scroll/resize the browser enough, the images get distorted or content overlays improperly. Is there an alternative method I can use for this technique, or an actual fix?
HTML
<section>Hi CLICKME</section>
<section>hi</section>
<section>hi</section>
<section>hi</section>
<footer><p>I am some text</p></footer>
<aside class="menu">
I'm a menu.
</aside>
CSS
body {
background: #222;
transition: all 0.3s;
-webkit-backface-visibility: hidden;
}
body.bump {
transform: translate(-258px, 0);
}
section {
background: #CBA;
color: white;
line-height: 450px;
font-size: 32px;
height: 500px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
z-index: 1;
}
section:nth-child(2) {
background: #FAFAFA;
}
section:nth-child(3) {
background: #CCC;
}
section:nth-child(4) {
background: #ABC;
}
section:first-child {
background: url(http://placekitten.com/1600/500) center top;
background-attachment: fixed;
-webkit-backface-visibility: hidden;
}
#media all and (min-width: 73.75em) {
section:first-child {
background-size: cover;
}
}
footer {
background: url(http://placekitten.com/1400/500) center top;
background-attachment: fixed;
color: white;
font-size: 32px;
height: 500px;
}
#media all and (min-width: 73.75em) {
footer {
background-size: cover;
}
}
footer p {
position: fixed;
bottom: 200px;
left: 0;
text-align: center;
width: 100%;
}
aside.menu {
background: #222;
color: #FFF;
height: 100%;
padding-top: 30px;
position: fixed;
top: 0;
right: 0;
text-align: left;
transform: translate(516px, 0);
transition: all 0.3s;
width: 258px;
-webkit-backface-visibility: hidden;
}
.bump aside.menu {
transform: translate(258px, 0);
}
JS (using Jquery)
$('section a').click( function(e) {
$('body').toggleClass('bump');
});
I did a workaround, by applying the fixed background to the body, wrapping everything in body in another div (animating that instead, so it wasn't affecting the body background) and the footer stayed the same, since having scrolled that far there is no way to pop the sidebar out anyway (so no animation flicker to worry about).