How do you write multiple background gradients using Compass? The docs only show examples of writing a single gradient at a time and I can't find anything about it by googling except a google group discussion that went quiet over two years ago! There must be a way of doing it cos layering up gradients is quite common practice I thought!
You should write them like so:
div{
#include background( linear-gradient(top left, #333, rgba(1,1,1, .3)),
radial-gradient(#c00, #fff 100px));
}
source: http://compass-style.org/reference/compass/css3/images/
(ugly but working) example: http://codepen.io/nobitagit/pen/cFjkv
Related
is there a way in CSS to get the initial parameter of something, without using javascript, for example:
width: calc(initial-20px);
if so, ho can i retrieve the value of specific parameters, like width.initial?
SCENARIO
It's a visual studio web browser, (it doesn't support css3 by default), i whant an element to look like highlited, but i can only do it through html attributes(i wanna go the easy way). So i could just style="background-color: yellow !important;", but what if background is already yellow? So i decided that calculating the highlight color would fix be awesome ( as i know now it is impossible through css ) background-color: rgb(initial,calc(initial-50),initial) !important; something like that. So this is a scenario. Suggestions are apreciated.
Simply put, no it is not possible to do this with css. You also can't perform calculations like that. You can only do calculations for percentages, like Mooseman said (edit: Mooseman deleted his answer. It mentioned that you can use width: calc(100% - 40px); for example, but you can't use initial like that). for either of those things you would need to use JavaScript.
Edit: Another option for modifying width could be a margin, although that doesn't necessarily do exactly what you want. For highlighting, you could use something like this:
p {
background-color: #FFFF00;
}
p:hover {
background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));
}
<p>Example paragraph with background</p>
This way you overlay a translucent white layer on top of your background-color, making it a bit lighter. That way you can change the background colour without having to know what the original background was.
i think you can Use LESS.
You Can See Here:
http://www.ibm.com/developerworks/opensource/library/wa-less/index.html
What is the difference in efficiency between background-color: #BADA55; and background: #BADA55;? I realize it's quite trivial, but is there a difference in how the browser extracts the values of each. Also, on a slightly related note, on CSS3Please I noticed that for linear-gradients they specified them using background-image. Is there any reason not to simply use background?
The spec makes no mention of how browsers should implement parsing of properties, and in particular, shorthand properties. All there is to it is a grammar, and the grammar says nothing about its implementation. How a browser parses a shorthand declaration then, I suspect, is entirely implementation dependent and not easily answered (unless you have the source code, of course).
In fact, the main reason why we have numerous CSS hacks specifically catered to IE is because of how differently (and often poorly) it understands CSS.
Is there any reason not to simply use background?
The answer lies in your previous sentence:
Also, on a slightly related note, on CSS3Please I noticed that for linear-gradients they specified them using background-image.
Indeed; CSS gradients are considered images for use with backgrounds, and are documented in the Image Values module. The individual background property they apply to is background-image.
If you use the shorthand property to specify either only the color or only a gradient, it will use the initial value for the rest of the values. If this difference in used styles matters, then the difference in performance becomes completely out of the question, because it's no longer a fair comparison.
In this example, the second background shorthand declaration will completely override the first one, leaving you with a solid color and no gradient as the initial value of background-image is none:
background: radial-gradient(white, rgba(255, 255, 255, 0)) /* transparent */;
background: /* none */ green;
The purpose of the shorthand notation is to specify values for multiple related properties in a single declaration, so in order for both the gradient and the color to apply, it should be rewritten as:
background: radial-gradient(black, transparent) green;
You're second example should be: background: #BADA55;, but either way is fine and should not be something you need to worry about.
If you are curious how browser parse CSS I can tell you: it depends (ever worked with IE?). For Chrome you can see the source on GitHub and the Firefox source can be found here.
I would like to be able to create nice-looking buttons of any color dynamically within a web page, without defining a separate CSS class for each color ahead of time.
Using CSS3 gradients with alpha channels seems like it would be the best way to go about doing this, with low opacity gradients overlayed on top of a solid background color.
However, I don't know enough about CSS to even tell whether or not this is possible, much less actually implement it.
I have found a couple of resources on the web that look like they will help:
CSS3 Gradient Button Guide
Transparency and CSS3 Gradients
Can someone with more CSS experience tell me if this is possible, and perhaps point me towards other resources to make this easier to pull off?
Using something like LESS or SASS, this is fairly easy to do legitimately. Create a mixin like this (robust version):
.auto-gradient(#color) {
/* Use any of the built in functions like saturate() or spin() */
#topcolor: lighten(#color, 20);
#bottomcolor: darken(#color, 20);
background: #color;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#topcolor), to(#bottomcolor));
background: -webkit-linear-gradient(#topcolor, #bottomcolor);
background: -moz-linear-gradient(#topcolor, #bottomcolor);
background: -ms-linear-gradient(#topcolor, #bottomcolor);
background: -o-linear-gradient(#topcolor, #bottomcolor);
background: linear-gradient(#topcolor, #bottomcolor);
/* If using PIE.htc for IE */
-pie-background: linear-gradient(#topcolor, #bottomcolor);
behavior: url(pie.htc);
}
Usage:
.my-button {
.auto-gradient(darkviolet);
}
This will compile to valid CSS(3), it should be something like this:
.my-button {
background:darkviolet;
background:-webkit-gradient(linear,0 0,0 bottom,from(#c43aff),to(#4c006d));
background:-webkit-linear-gradient(#c43aff,#4c006d);
background:-moz-linear-gradient(#c43aff,#4c006d);
background:-ms-linear-gradient(#c43aff,#4c006d);
background:-o-linear-gradient(#c43aff,#4c006d);
background:linear-gradient(#c43aff,#4c006d);
}
Note: I use lessphp myself, and the version I'm using now seems to choke on named colors like DarkViolet being passed to lighten/darken unless they are lowercase.
MrOBrian's suggestion of the Ultimate CSS Gradient Generator made this a snap. Here is the solution I ended up going with, which is a relatively simple CSS style cobbled together from the aforementioned Gradient Generator and the Cross-Browser CSS Gradient Button Guide.
The following code adds a nice, slick button appearance when applied to an element with a background-color CSS attribute specified. This will allow me to use a common style for all of my buttons, specify their color using the background-color attribute.
JSFiddle Demo
Thank you for all of the advice and suggestions!
This question already has answers here:
Drop shadow for PNG image in CSS
(15 answers)
Closed 7 years ago.
Is it possible to do a drop shadow on the content of a PNG?
Not a square, but an object drop shadow that
acts on the non-transparent content of the PNG.
It's definitely possible.
Using filters, sample:
img {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
It's not possible to do that in CSS. However, it's quite possible to do it through a canvas, but it will be somewhat inefficient (as it's processed by the client each time) and will be JavaScript dependent. Doing it in the PNG will be easier and will work on more browsers.
If you want more information about it, search the web for things like "html canvas blur" and "html canvas load image". Or better still, use the canvas shadow functionality which can do it all.
Here's an example: http://philip.html5.org/demos/canvas/shadows/various.html
create context from canvas
set context.shadow(Color|OffsetX|OffsetY|Blur) as desired
load PNG from img tag with context.drawImage
ah! the shadows!
And a bonus:
use context.toDataURL if you want to export to PNG (make a web app which you drop PNGs in and it gives you shadows!)
How times change. It's now possible in some browsers, as shown in the currently accepted answer.
It's not possible to do this using CSS:
That's what I assume you're asking for.
Until it will be available to CSS, you can try my approach.
My example uses this picture:
because it has a transparent background and it isn't square (for CSS's box-shadow to get into action). It's not very fancy, but serves this small and simple tutorial fine.
Next step I took was to create another image, based on the one above, to place it under the original.
Step1. Add blur:
Step2. Removed light and contrast:
So I have the original and the shadow.
Next I will display it as if it is a shadow:
Style:
.common {width: 100px;height: 100px;background-size: 100% 100%; position:absolute;}
.divOriginal {background-image: url(../img/original.png);top:2em;left:2em;z-index:10;}
.divShadow {background-image: url(../img/shadow.png);top: 3em;left: 2.5em;z-index:8;}
Do the magic:
Add one div and set attribute class="divOriginal common" and another one with class="divShadow common".
The result should be:
Cheers!
Adi
I've wrote a jQuery plugin for this, based on Chris Morgan's suggestion about canvas. You can find it on GitHub here: https://github.com/Kukunin/image-shadow
Use createjs
sample can be found at
JSFiddle
shadowTarget.shadow = shadow;
stage.addChild(shadowTarget);
shadowTarget.x = 500 / 2;
shadowTarget.y = 450 / 2;
shadowTarget.regX = shadowTarget.image.width/2;
shadowTarget.regY = shadowTarget.image.height/2;
Does anyone know of an online css optimizer / formatter that can handle css3 gradients?
I've tried using http://www.cleancss.com/ but converts something like this cross browser style :
.example {background:#555555;background:-moz-linear-gradient(top, #949494 0%, #555555 50%, #171717 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#949494), color-stop(50%,#555555), color-stop(100%,#171717));
into:
.example {background:0 color-stop(50%,#555555), color-stop(100%,#171717));}
Thanks!
This one says it can handle CSS3 http://devilo.us/. I tried your snippet and it wasn't too smart about the hex, but at least it doesn't hose your code.
http://refresh-sf.com/
Once you set it to "CSS" in the dropdown, this handles cross-browser CSS gradients just fine, including minimising the hex values.
It compressed this (260 characters):
.example {
background:#555555;
background:-moz-linear-gradient(top, #949494 0%, #555555 50%, #171717 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#949494), color-stop(50%,#555555), color-stop(100%,#171717));
}
to this (219 characters):
.example{background:#555;background:-moz-linear-gradient(top,#949494 0,#555 50%,#171717 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#949494),color-stop(50%,#555),color-stop(100%,#171717))}
Though not particularly on point here, I would highly recommend trying out SASS which does all sorts of compression (without removing things) and adds a whole crap load of cool things to CSS:
$ sass --watch -t compressed master.scss:master.css
Which will "watch" master.scss for changes and once a change has been made via saving the file, the CSS will be compressed and saved to master.css.
SASS also adds a lot of cool things to CSS like variables, if/else statments, reusable code blocks (e.g. Mixins), and functions like lighten(#000, 10%) and darken(#fff, 30%) which can take a color and lighten/darken it a specific percentage.
Lots of cool stuff, check it out.
You are better off formatting the CSS to be readable yourself, and then using a CSS minifier automatically when moving to production.
You can also use http://tools.w3clubs.com/cssmin/ which is a port of the YUI compressor. In my tests it worked better then all the above mentioned.