I have some legacy keyframes that I want to re-namespace.
E.g I have legacy code:
#keyframes bulge {
50% {}
}
And I want to do something like:
#my-ui-bulge: #bulge;
Is this possible?
Related
In some cases is common to use same values in different properties, for example (is just an example to show purpose) the following nested rule:
.button-link
{
height:40px;
a
{
line-height:40px;
}
}
The idea is that to vertically center button text line-height and height should be equal.
Is there a way in LESS to "assign a value taken from a diffent property"?
I know that I should use a LESS #variable but in this case is not the same thing and need extra code. Instead should very interesting and useful if I should edit only button's height and then LESS will replaced the same value to line-height
UPDATE:
Another example could be the following:
.button-link
{
color:white;
background:black;
&:hover
{
color:black;
background:white;
}
}
In which "hover" status should invert color and background-color comparing to default state.
This is possible starting with v3 of LESS! Here is the documentation on it.
The example use case they provide ends up with the background-color getting the same value as the color property when compiled:
.widget {
color: #efefef;
background-color: $color;
}
You can´t :(. What i usually do is:
#buttom-height = 100px;
#a-link-height: #buttom-height;
and use that variables in your less declarations. Its a dummy example, i know, but imagine calculated data values from other variables or complex dependencies, proportional paddings/margins... that´s the way i learnt from Bootstrap LESS code.
I'm using Bootstrap 3 and trying to remove/exclude the breakpoint between medium and large devices. I have a existing website which is optimised to 970px which looks great. What I am trying to do is remove the md > lg breakpoint so that even on large widescreen desktops the maximum body width is 970px and still centred.
Anyone know if there is a quickfix solution to this?
Any advice would be much appreciated
Decbrad
If you're overriding the bootstrap breakpoint (and using containers properly), adding this below the bootstrap breakpoint media queries in the bootstrap CSS file should work for you.
If using LESS
#media (min-width: #screen-lg) {
.container {
width: 970px;
}
}
OR, you can simply override the bootstrap container in your own CSS (just make sure you load it after bootstrap.css)
#media (min-width: 970px) and (max-width: 2500px) {
.container {
width: 970px;
}
}
OR you can find the media query in the bootstrap.css file on around line 1240 and simply change it there
#media (min-width: 1200px) {
.container {
width: 1170px; /* change 1170 to 970 */
}
}
the less way is good but this one is more flexible and reliable:
#media (min-width: #screen-sm) { .container { width:#screen-md; } }
Because in bootstraps default values the width of #screen-md is 992px.
Now you will just have a breakpoint for small devices (smartphones) and any other bigger devices. they will all get the same layout
You can set a max width on the containers:
.container-fluid,
.container {
// Disable large-desktop breakpoint.
max-width: $container-md;
}
No need for media queries or anything.
The $container-md value is typically 970px, unless you changed the $grid-gutter-width. For LESS, replace the $ of variables with an #. For regular CSS, replace the variable with the hard coded pixel size.
For example, I would like to be able to do this:
.bigfirstletter(#mag) {
&:first-letter {
font-size: [get_original_font_size] + #mag;
}
}
But as far as I can see I have to do this, which is not as neat
.bigfirstletter(#fontsize, #mag) {
&:first-letter {
font-size: #fontsize + #mag;
}
}
Do I have an alternative? Thank you for your help.
damn it was simpler than I thought :)
.bigfirstletter(#mag) {
&:first-letter {
font-size: 1em * #mag;
}
}
1em will simply inherit whatever it is defined for element, and you just set your magnification. I changed the plus sign to multiply on purpose as with this you're going to have better control over font size - #mag=1.0 for same font size, #mag=1.5 for 50% bigger, and so on..
sorry about the answer below, for some reason I didn't see that you're using first-letter in the example provided (doh!)
take a look at :first-letter CSS pseudo class - here
Is there an easier way to display/create rollover images than batching in Photoshop/Fireworks?
Ideally this would be done through CSS or Javascript, somehow creating a semi-transparent white layer over an image when moused over. Currently I just have Photoshop process images with +10% brightness, and do the rest in Dreamweaver with find/replace.
It'd be nice not to have to create separate rollover images for each picture. Thanks!
Using css, you can use something like this:
#navigation a {
background:url(image.png) no-repeat;
filter:alpha(opacity=100);
opacity: 1 }
#navigation a:hover {
filter:alpha(opacity=80);
opacity: 0.8 }
More info here
With images you don't always have to create a new image for rollovers, you can edit the CSS to decrease the opacity of the element:
.myElement
{
background.image: url(path/to/file/image.png);
}
.myElement:hover
{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Also I think you'd benefit from looking into CSS Sprites:
CSS-tricks sprites tuorial
A list apart's CSS sprites
Css sprites.com generator
I am trying to do a images gallery for mobile webkit,
The only way it is actually fast enough is using the hardware accelerated translateX .
My problem is that the div take back its initial position at the end of the animation. I add the slideGalLeft class cliking on the left button. to the animated div
You can see an example here, in the callback events section:
http://position-absolute.com/jqtouch/demos/main/#home
.slideGalLeft {
-webkit-animation-name: slideColis;
}
#-webkit-keyframes slideColis {
from { -webkit-transform: translateX(0%); }
to { -webkit-transform: translateX(-100%); }
}
Do not use webkit animation for this as it comes back to the default values once played.
Instead define
.slideGalleft{
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: translateX(0%);
}
and using Javascript, either set -webkit-transform: translateX(100%); or add a CSS class to your element which set the final transform value and webkit will animate it properly
Guillaume's answer is great. However, if you are looking for hardware acceleration, you must let the webkit engine know you want 3D rendering (what makes hardware acceleration active).
According to http://www.html5rocks.com/tutorials/speed/html5/#toc-hardware-accell, this is done by adding translateZ(0) to your rule, like so:
.slideGalleft{
-webkit-transition: -webkit-transform 1s linear;
-webkit-transform: translateX(0%) translateZ(0);
}
Follow Guillaume's advice beyond that.
Use:
-webkit-animation-fill-mode: none/backwards/forwards/both;
This allows you to define at what end of your animation the element remains when the animation is finished.
I was able to make it work by adding a "display:none" style on the finish of the animation. Use the following CSS:
.paused {
-webkit-animation-play-state: paused;
}
.hiddendiv {
display:none;
}
Then in your jQuery code:
$('div.sideimage').click(
function () {
$(this).removeClass("paused").delay(2000).queue(
function(next) {
$(this).addClass("hiddendiv");
next();
}
);
}
);
Should work!