I have a CSS3 button like this
<button class="button brownb">My Button</button>
CSS
.brownb:active {
background: -moz-linear-gradient(center top , #831516, #9B4141) repeat scroll 0 0 transparent;
color: #FFFFFF;
}
.button:active {
position: relative;
top: 1px;
}
.brownb {
background: -webkit-gradient(linear, left top, left bottom, from(#A55757), to(#831516));
background: -moz-linear-gradient(top, #A55757, #831516);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A55757', endColorstr='#831516');
border: 1px solid #A55757;
color: #D7D7D7;
}
.button {
border-radius: 0.5em 0.5em 0.5em 0.5em;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
cursor: pointer;
display: inline-block;
font: bold 14px/100% Arial,Helvetica,sans-serif;
margin: 0 2px;
outline: medium none;
padding: 0.5em 2em 0.55em;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
vertical-align: baseline;
}
I would like something like light just catching the face of a sharp, shiny sword and then going off. Is it possible with CSS3? I have seen this effect many times using Flash and thats why the query.
English is not my native language and so this effect might have got a name ( which obviously I don't know and so I could not google it. ) Is it possible? I am not particular about having this effect on a gradient ( plain background will do )
Fiddle here: http://jsfiddle.net/naveen/V9Rtw/
Disclaimer: This is basically a give me the codez but I am not good with CSS and so this doubt. Any pointers / nudge with the right transitions will be of tremendous help.
Update
I want something like what Google implement in the search page for India.
Link here: http://www.google.co.in/search?q=hello+world
Google does this using this sprite: http://www.google.co.in/images/experiments/p1/p1sprite.png
And they place it inside a folder named experiments :)
Edit: I assume that you are talking about the search button. My network didn't allow me to see the other links that you posted :(. The way that I have found quite successful with the button is to create a background image like this. Say your image is 25px tall by 75px wide. Create an image 75px x 75 px. Put three buttons in there like this:
____________
| normal |
------------
____________
| over |
------------
____________
| |
------------
Then, use the background-position property to set which position you want in the image. Also make sure that the overflow:hidden. This way, you get more control over the effect, download time is negotiable (after all, for progressive download, the make image appears first), and you are more backwards compatible, and it is cached (presumeably). I also don't know how the gradient rendering affects browser performance, but I would imagine that it could possibly have some impact.
Also, please mark as an answer if this answers your question!
JMax
I haven't seen a way to do this. I assume that you want this effect to be visible when they click the button, correct? You could try changing the gradient so that it would either raise up or lower, but that would make the effect for entire way across. Here is a possible way for that:
background-image: -webkit-gradient(
linear,
right bottom,
right top,
color-stop(0.32, #A55757),
color-stop(0.57, #831517)
);
background-image: -moz-linear-gradient(
center bottom,
#A55757 32%,
#831517 57%
);
From: http://gradients.glrzad.com/
Also, have you thought about using an image? I think that would give you the flexibility that you are looking. I don't know of your targeted audience, but it might also provide better backward compatibility.
JMax
The answer to your question is: No it is not possible to do this with just CSS. It can however be done with a combination of JavaScript and CSS.
Using your Google +1 button as an example, they have a sprite and will be using JavaScript to switch the background position over a set period of time when the icon is hovered over.
An example of how to animate sprite images over time can be seen here:
How to show animated image from PNG image using javascript? [ like gmail ]
http://designlovr.com/beautiful-photoshop-like-buttons-with-css3/
This might help you for a shiny effect, transitions must be made still tho
Related
Let's say someone is working on a web site that allows users to create a profile. This designer really likes the way input fields look with rounded corners, but Chrome's autofill feature is doing something odd to them. Of course, they could take the easy way out and remove the border-radius definition, therefore avoiding the weird corners, but then the site wouldn't have the look they were hoping for.
Here are before-and-after images of what the fields would look like when autofill is used.
And here's a JSFiddle for anyone that would like to play around with it.
If helpful, here is the relevant code being used to modify the fields:
.field {
background-color: #202020;
border: 1px solid #000;
border-radius: 4px;
box-shadow: 0 0 5px #000;
color: #d8d8d8;
}
input:-webkit-autofill {
box-shadow: 0 0 0 100px #202020 inset, 0 0 5px #000;
-webkit-text-fill-color: #d8d8d8;
}
Several attempts were made to find the culprit behind this problem, including removing the outer shadow from both definitions, as well as changing the inner shadow's position and blur radius. The greyish corners were still there. The only real "solution" was to revert to square corners, but that option is being reserved as a last resort.
After numerous searches for a solution to this issue, all that could be found were ways to circumvent the default pale yellow background. And that's great news, but the designer is still left with those ugly corners. Is there a way to get rid of them entirely and maintain the field's original style? or is it a glitch that has no work-around?
Thank you for any insight or help you can provide.
Kreven's solution, while not the most elegant line of code, will definitely get the job done for most people I reckon. However, I'd like to modify it a bit and explain why it even works in the first place. Let's take a look at this line of code:
transition: background-color 2147483647s;
Here is a transition that would take 68.24 years to complete. Looks silly, right? If you're wondering where that magic number came from (2147483647), this is the maximum size of an integer, and thus the maximum duration for a CSS transition. What this transition is doing is making it take 64 years for your browser's autofill implementation to change the background color of your input.
It's also worth noting that this cheap trick will negate the need for you to use the "-webkit-box-shadow" CSS command (unless, of course, you need the autofill background-color to be different than the non-autofill background-color).
Hope this helps somebody! Cheers.
I found that increasing the border width and making it the same colour as the input background seems to help. Then reduce the padding to achieve the same height:
https://jsfiddle.net/Lguucatv/1/
border: 4px solid #202020;
padding: 1px;
Also modified the box-shadow to match original design:
box-shadow: 0 0 0 1px #000, 0 0 5px 1px #000;
Is there a way to get rid of them entirely and maintain the field's original style?
Here is the css
body {
background-color: #282828;
}
.field {
background-color: #202020;
border: 1px solid #000;
color: #d8d8d8;
margin: 100px; /* adding space around it to */
padding: 5px; /* make it easier to see */
}
input:-webkit-autofill {
box-shadow: 0 0 0 100px #202020 inset, 0 0 5px #000;
-webkit-text-fill-color: #d8d8d8;
}
DEMO
add transition to background-color with high animation time to the .field element
.field {
...
transition: background-color 5000s;
}
solutuion found here
demo on codepen
I fixed the problem by adding this to my css:
#media (prefers-color-scheme: dark) {
[data-theme*=dark] {
color-scheme: dark;
}
}
I am using this:
<span class='fa fa-fw fa-stop'></span>
But it shows a very big square. Does anyone know if it possible to make it show just the outline of the square?
Another solution is given here, which can be used for all font-awesome icons:
Is it possible to color the fontawesome icon colors?
The css looks like this:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #666;
color: transparent;
Unfortunately not, the icons which are provided as outline only have an additional -o in the name e.g: fa-arrow-circle-o-left - the stop icon doesn't have that option.
You could use the fa-square-o which is: http://fortawesome.github.io/Font-Awesome/icon/square-o/ which would achieve what you need - but it's not specifically the stop icon but just outlined.
You could either use fa-square-o, or you could use fa-stop and using CSS color and border rules to achieve the effect for a box with no rounded corners.
Here is a link:
http://jsfiddle.net/5mcddx2q/
.fa {
color:rgba(0,0,0,0);
border:1px solid red;
}
Or you could search for an outlined box in another set of font icons that is not font-awesome, thereare a few on bootstrap.
The problem with the webkit-based solutions is that they'll only work in webkit browsers. A slightly more portable solution would be to set the color of the icon to the same as the background (or transparent) and use text-shadow to create an outline:
.fa-outline-dark-gray {
color: #fff;
text-shadow: -1px -1px 0 #999,
1px -1px 0 #999,
-1px 1px 0 #999,
1px 1px 0 #999;
}
It doesn't work in ie <10, but at least it's not restricted to webkit browsers.
For people coming across this in the future: I was solving a similar problem and came up with a tangential solution that may work depending on your scenario and the specific icon. I had a blue background and wanted a white checkmark outline, with the blue inside preserved. What I ended up doing was creating two checkmark icons- one that was white, and another that was blue but slightly smaller. I then used css to position the blue checkmark inside of the white one which achieved the desired effect. It may take some fiddling and it may not work for all use cases, but it worked for me in mine.
I am trying to make a notebook paper on my blog, and i wanted to make horizontal lines in it. I was successfully able to draw one horizontal line using css, but i am unable to find a way to repeat it, so that it can fill the entire page.
Here is my CSS code:
.horizontalLines {
border-bottom: 2px solid #CCCCCC;
padding-top: 25px;
width: 100%;
}
This code only allows me to make only one line, how can i make multiple lines?
As an alternate solution, there's a beautiful lined paper effect written using CSS available here.
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
Browser Support: The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be
displayed correctly even on those browsers (for example at the time of
writing, Gecko is quite buggy with radial gradients).
Using your way you have to insert multiple of these elements. You can't simply repeat them.
Another - and I guess more suitable way - would be using a background image that you repeat horizontally and vertically to achieve this effect.
body {
background: transparent url(path/filename) repeat 0 0;
}
Or, if you can use gradients, nikhita dkslfslg's answer (+1 for that) might help.
Here you go.
.paper {
background-image:url("data:image/gif;base64,R0lGODlhFgAsAJEAAP////n8/ePv9gAAACH5BAAHAP8ALAAAAAAWACwAAAInhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrZuFsTyTNeBgOf6zgsFADs=");
}
Just Encode an image in base64 and it works fine.
You can try encoding HERE.
You can do it with box shadows:
.lines{
width:500px;
height:400px;
background: red;
box-shadow: 0px 10px 0px 0px black, 0px 20px 0px 0px green, 0px 30px 0px 0px blue;
}
http://jsfiddle.net/7DkKc/
Or simply with images:
.lines{
background: transparent url(url) 0 0 repeat-x;
}
Or with gradients.
http://www.colorzilla.com/gradient-editor/
I am trying to increase the width of a text.I am not trying to make it bold.I am trying to keep the inside of the text empty.My idea is to fill the text with a color,and ,onhover change the color.
Here is a picture of what i am trying to accomplish:
http://img.ctrlv.in/50eee77779a5b.jpg
The issue is that I cant find a way how to increase text width using css.(i found it via javascript,but then the text assumes properties of an image)(and hence onhover effect is not possible)(I found a way to increase font width using javascript in a w3schools tutorial here
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_text2)
I am looking for a html solution(not canvas)
I know there is a shortcut in CSS3/HTML 5 to achieve this effect,but not able to recollect/search sites where i saw the effect.
Any help would be appreciated
Thanks in advance
May not be perfect but not sure of a css selector that can increase letter width, you could try something like:
a:hover {
letter-spacing: 0.2em;
color: #07C;
}
This increases distance between letters, also use css rather than jquery for hover event, its easier!
As far as I can see, you actually want to stroke the text. The width of the font can stay the same so long as the stroke happens outside the boundaries of the text, right?
Well, CSS Tricks has an article which talks about stroking text using webkit-text-stroke and/or text-shadow. An example is given here.
So, you would end up with something like:
/* CSS from tutorial */
.stroke {
/* WebKit (Safari/Chrome) Only */
-webkit-text-stroke: 1px black;
/* If we weren't using text-shadow, we'd set a fallback color
and use this to set color instead
-webkit-text-fill-color: white; */
color: white;
text-shadow:
3px 3px 0 #000,
/* Simulated effect for Firefox and Opera
and nice enhancement for WebKit */
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
/* The colour changing bit - added by me */
.stroke:hover {
color:blue;
}
After finding a similar question on SO, I still am having problems. Here is my CSS:
.title {
position:absolute;
bg-color:#FF0000;
z-index:10;
width:100%;
height:100%;
font-size:250%;
color: #FCD116;
text-shadow: 2px 2px 3px #555;
filter: dropshadow(color=#555, offx=1, offy=1);
zoom:1
}
In Google Chrome, the shadow is only offset by about 2 pixels. This is exactly what I want. In IE, however, the shadows are super far away (relative to what I want) and chunky. I've set the offx and offy to one. Why isn't this working? I've never used this method before, I just found it now while looking at the suggestions on SO with my title.
AS A SIDE NOTE
While I am asking, does anybody know how to get IE to let me do transparent images? I tried to put a semi transparent image (a button with a drop shadow) but the shadow is dark black and it gives the appearance that the quality has been compromised. I'll award points for this question (if answered) :)
Main issue - you need to use a full 6-character HEX value - i.e. #555555 - inside the filter.
Side issue - personally I've found Drew Diller's belated_png script to be a quick and reliable solution. Drop in the script, and apply a png_bg class to anything you want to have alpha transparency.
PS - http://jsfiddle.net/peXwY/
.title {
position:absolute;
bg-color:#FF0000;
z-index:10;
width:100%;
height:100%;
font-size:250%;
color: #FCD116;
text-shadow: 2px 2px 3px #555;
Filter: DropShadow(Color=#555555, OffX=2, OffY=2, Positive=1);
zoom:1
}
Here's some good information for your side note... Also, take a look at the "sleight" reference towards the bottom: http://24ways.org/2007/supersleight-transparent-png-in-ie6
As for the main issue, considering messing with the z-index of .title. I recall having issues with it in IE several months ago, and it was because of the way IE was ordering the vertical objects on the page.