I downloaded a Bootstrap Theme and there they use Sass darken, to make the button more obscure on hover. I managed to use the instagram gradient as it's background, though since the darken function requires a base color I was wondering, how could I achieve the same effect?
(I guess I could just us opacity on hover instead for all of the social buttons but I was hoping to address this just for the sake of science)
background: linear-gradient(to right bottom, darken(#667DB6, 5), darken(#0082C8, 5))
Related
I'm very very bad with CSS (I do not understand syntax at all), I'm just using my knowledge to tinker with code.
I'm using Chrome with Stylish addon, and I want to make dark wikipedia but with my preferences.
I took some code from stylish and just changed colors, but now it's something new where I have
to add stuff so I'm stuck.
It's obviously made in chrome, so it's temporary. This is my problem:
http://imgur.com/a/9IYI3
And my question is how to make that box opaque with like #555 color, without destroying everything else.
Here is code that I'm using: pastebin.com
EDIT: note that opacity will change the opacity of everything in the element it is applied to. Depending on the situation, rgba is the best route.
This can be accomplished a couple of ways:
#mybox
{
background-color:#555;
opacity:0.5;
}
Or
#mybox
{
background-color:rgba(85, 85, 85, 0.5);
}
The opacity property is to change the transparency of an element (0.0 is 0%, while 1.0 is 100%).
The same can be done with rgba (red, green, blue, alpha). Alpha being similar to opacity (same affect really).
As Dwza said in the comments, it would be good for you to take some CSS tutorials. A quick Google search will bring up many. This one looks good: http://webdesign.tutsplus.com/tutorials/the-best-way-to-learn-css--webdesign-11906
I have a Tumblr blog, and I'm using the Effector theme. I like it, but unfortunately it colors the backgrounds of all partially transparent images black. Is there any way I can edit the theme's HTML so that it makes transparent backgrounds white? I looked through the code already, but I think I need someone more familiar with HTML to give me advice.
Thanks!
Looking up the tree from the element, you only need to make one change for it to be white, and that’s in the .photo-panel rule:
background: none repeat scroll 0% 0% rgb(0, 0, 0);
Change rgb(0, 0, 0) to transparent, or just remove that rule entirely.
(For full transparency, also remove the background rule on .post .post-panel, and probably its box-shadow too.)
I'm wanting to create a neon sign of a logo for use on a website and also email signature.
I've a couple of questions I'm hoping a kind person can help me with.
For the email signature, I was thinking an animated gif would be best- just to be safe? However, I could use an html template- but I'm unsure the CSS animations used on the website version would render correctly in an (or numerous) email client(s)?
I've found this example of a CSS animated neon sign using typed letters in the mark-up. http://www.broken-links.com/tests/animations/
I was wondering if this same CSS animation technique would work with a flat image? How would the CSS know where the edges of the letters are? Would a transparent png work correctly using this technique? I've got the image as pixel or vector based if that helps?
This is a screen shot of the logo and quick mock up style of neon sign I want to create.
Thanks in advance!
The example you linked uses text only. It uses a #font-face rule to load a custom font, then animates the colour of the font. Its colour is flat.
What you are attempting to do involves rather more. The easiest solution would probably be to separate each letter into its own image, then you can animate the opacity property. This is probably the best you can hope for.
im not sure if i understand you well.. but this will apply a drop-shadow to a transparent image as applied on the neon text..
-webkit-filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.5));
filter: url(/assets/svg/shadow.svg#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='rgba(0,0,0,0.3)')";
filter: progid:DXImageTransform.Microsoft.S
This link also explains a lot about drop-shadow and box-shadow - due to the browser support it's not quite what I need for my project, but might be useful for someone else searching this drop shadow CSS trick.
http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison
I have a class called "button", I simply use it for all hover elements. Most of my buttons are black (background-color), and the .button:hover changes the background-color value of the items to gray.
However, some of my buttons have random colors so they lose the effect when their background-color changes to light gray. for this reason, I would like to change the "satauration" value of the hovered item instead of modifying the whole color. That way, the hover effect will base on the base color..
I was thinking... if it is possible to change the "saturation" value (only) of the background-color so that my hover effect will still be useful for random colors.
Using filter currently seems to only work for webkit-based browsers..
-webkit-filter: saturate(3);
filter: saturate(3);
Demo | Source
Coupling the saturation filter with brightness seems to have the most effect, with the black being visibly affected
-webkit-filter: brightness(0.2) saturate(3);
filter: brightness(0.2) saturate(3);
Demo | Source
Additional demo: http://html5-demos.appspot.com/static/css/filters/index.html
There are two solutions for this problem:
First, use a transparent png with a white to transparent gradient. On onHover, apply the image over the button. I haven't tried it but it looks promising.
Second, use a css inset dropshadow. With the parameters set correctly, you can easily manage the gradient effect.
You can also use rgba(r,g,b,a) for making changes to the underlying button color. But remember that the text value of the button will also get affected, giving you issues of usability.
Can somebody assist with why the buttons on the page below don't render the background color correctly? The background-color property appears to be set correctly but I'm wondering if there's a conflict with another CSS file my template is using. Any advice?
http://www.chrisboulasphotography.com/store/ferrari-owners-manuals
This gradient (defined in /wp-content/w3tc/min/1088176c.f6146a.css on line 379) is clobbering the background property...
background-image: -moz-linear-gradient(center bottom , #F0F0F0 2%, #FAFAFA 51%);
Alex answered this perfectly right. Using Firefox with Firebug I have been able to disactivate the css line he suggested and it seems that the background color of your buttons appears again.
Have you emptied you cache to check if it's not your browser who has kept the old css in memory?