I'm trying to create a shadow that is wider in the top like in the picture below. It does not have to be very cross-browser, recent Firefox and WebKit based browser will do just fine. Does anyone have any good ideas on how to do this?
I haven't yet tried this technique, but CSS3 includes the border-image property, as described here. Perhaps if you developed your own shadow, you might be able to set it as the border (or use a wrapper element with such a border).
You may want to try fiddling with box-shadow and the transform property’s skew function. Maybe place a transparent div with box-shadow beneath the content element, e.g.:
#shadow{
-webkit-transform: skewY(-10deg);
-moz-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
-webkit-box-shadow: 4px;
-moz-box-shadow: 4px;
-o-box-shadow: 4px;
box-shadow: 4px;
}
I just wrote about something similar.
photoshop or gimp, which u like
Related
my problem is I used some effect to make the card float using transform(translate) and some shadow and it works just fine, but whenever I come near the edges which is the end of the card width/height, it starts to glitch out with the animation, I believe I know why this is happening but I'm not quite sure how to fix it.. thanks!
just wanted to mentioned that the solution to that kind problems is wrapping the floating item with a wrapper and put the hover action on that wrapper not on the component itself.
so for example:
.card:hover{
box-shadow: -10px 0 10px 0;
transform: translate(10px, 10px);
}
Should turn into this:
.card-wrapper:hover .card{
box-shadow: -10px 0 10px 0;
transform: translate(10px, 10px);
}
Hi I'm learning to create some hover effects and managed to pull off what I had in mind with this animation: http://jsbin.com/xawibo/
The CSS that animates the image is this:
transform: scale(3, 3) translateY(50%);
But the animation is not smooth. The thumbnail becomes blurry during the transition, becoming crisp again only when the transition stops. There is also a slight left/right jerky movement.
Here is a quick Youtube video of what I see:
https://www.youtube.com/watch?v=yoIgV1ORbN8&feature=youtu.be
What am I doing that is affecting the perforamce of this animation? Am I nesting too many DIVs?
Seems like Chrome specific issue.
Instead of transform:scale() you can animate width:
.caption:hover > span img{
background: rgba(0, 158, 205, 0.45);
transform: translate(0,10%) ;
width:100%;
}
This happens on chrome on Windows apparently.
Seems very similar to the issue depicted here:
CSS transition effect makes image blurry / moves image 1px, in Chrome?
What happens when using -webkit-transform: [...] along with transform: [...] ?
To change a web page CSS to be RTL from LTR I have to set or invert the following CSS properties:
body{direction:rtl}
any float:left should be float:right and Vice versa
any padding or margin regarding left or right should be reversed
In addition any images should be inverted horizontally.
My question is: are there any more CSS properties should be changed?
text-align, background-position, border positions, left and right positions, basically anything and everything that has a horizontal property.
If you would like to do it by hand, you may go through a list of css properties such as this one, but personally I would look at using one of the online tools to get started.
CSSJanus is usually pretty good, though I am sure there are more out there if you google it.
Best of luck.
Are you just trying to use right-to-left writing, or are you trying to mirror the webpage?
body {
transform: scaleX(-1);
-ms-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
}
This will produce a mirror image of the webpage, but everything still works as it should (links are clickable in their new positions, for instance)
Another few properties...
box-shadow and text-shadow
/* multiply the first value ( horizontal offset of the shadow) by -1 */
`box-shadow: 5px -5px 5px 5px #abc;`
becomes
box-shadow: -5px -5px 5px 5px #abc;
and
text-shadow: 2px 2px #FF0000;
becomes
text-shadow: -2px 2px #FF0000;
2: border-radius
You need to be careful with this one as changing the values to achieve rtl works differently here
border-radius:25px 0px 0 25px;
becomes
border-radius:0 25px 25px 0; (not border-radius:25px 25px 0 0;)
Also, here are a couple of tips:
Horizontal Positions as Percentages
If you have a style like:
.style
{
position: absolute;
top: 22%;
left: 32%;
...
}
the left property would become 100-32=68%
2. background-position: Horzontal Value in pixels - eg:
background-position: -34px -85px;
In such cases you will have to work this out manually. (See this article)
As a reference:
Here's a great article about about converting a website to rtl
actually, the entire website http://rtl-this.com deals with rtl issues so can find lots of useful stuff there
You may try;
body {
-ms-transform: scaleX(-1);
-moz-transform: scaleX(-1); /* Gecko */
-o-transform: scaleX(-1); /* Operah */
-webkit-transform: scaleX(-1); /* webkit */
transform: scaleX(-1); /* standard */
filter: FlipH; /* IE 6/7/8 */
}
This will make a mirror effect. Here is a Live Demo.
You may try rtl if you want to flow letters from right to left and may use just text-align: right if you want to float items to right.
If you want text to begin from the right, you may try;
body{
unicode-bidi:bidi-override;
direction:rtl;
float: right;
}
Here is the Live Demo;
Is there a way to programmatically flip the background of an element using CSS or LESS? Specifically, I would like to invert the background gradient of a button. I do not want the content of the button to be flipped - just the background.
For example, this:
.button {background-image:linear-gradient(top, #000, #fff);}
should become:
.button:active {background-image:linear-gradient(top, #fff, #000);}
----------- EDIT: Adding more detail. -----------
Take this LESS code:
.button {
background-image:linear-gradient(top, red, green);
&.primary {background-image:linear-gradient(top, blue, yellow);}
&.secondary {background-image:linear-gradient(top, brown, grey);}
&:active {background-image:linear-gradient(top, ..., ...);}
}
Is there a way for me to reverse the direction of the gradient without having to define the ":active" state separately for the ".button", ".primary" and ".secondary" classes?
With Newer Browsers
This post is over a year old, but I thought I would note there is a solution now for some of the newer browsers. The following has been tested in IE10 (does not work in IE9 and under), FF21, and Chrome27.
Using a pseudo element and a transform, you can get what you originally desired. Originally, some issues did not allow transforms on pseudo elements, so this will not function in some older versions.
Here is the example fiddle. Though for fallback support, you may still want the additional vendor prefixes.
LESS
.button {
background-image:linear-gradient(to bottom, red, green);
position: relative;
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
&:active {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
}
&.primary {background-image:linear-gradient(to bottom, blue, yellow);}
&.secondary {background-image:linear-gradient(to bottom, brown, grey);}
}
I am not sure about your background-image:linear-gradient(top, #fff, #000); css rule but if you want to change button's background I guess this is the way - instead of .class selector use [type=''] otherwise :active wont work:
input[type="button"] {background:#fff;}
input[type="button"]:active {background:#000}
[...]
<input type="button" value="Test"/>
You mean like this:
http://jsfiddle.net/UgQvg/2
?
Unfortunately, I don't think LESS can work that way. You're basically trying to reference the colors of a nested scope using an outside scope - or rather, trying to get a polymorphism-like behavior. LESS just doesn't do that. It's cumbersome, but you'll probably have to define the :active portion for each button type. See this JsFiddle.
Now, I think you can do something like this using SASS (like LESS, but server-side, Ruby-based), perhaps using a list variable containing the specialized button classes, and then an #each loop to generate the :active styles. But that's probably overkill, unless you have a lot of specialized styles.
Nonetheless, if you're using LESS, you might want to take a look at LESS Elements - a useful set of mixins, which includes gradient support.
some designs on the Apple's user's webpage show a photo that is tilted slightly, like at a 5 or 10 degree angle. while this is no big deal, it does make the webpage totally different from "all the rest".
is it true that currently using HTML or CSS, this can't be done yet?
like the big photo in the middle:
alt text http://img7.imageshack.us/img7/383/phototilt.png
(the program lets you choose photos and then create the page (html and jpg) dynamically for you)
CCS 3 will offer this possibility, but it's still not cross-browser and you cannot do it with traditional HTML + CSS... yet.
Websites having a tilted image do it by rotating it in, say, Photoshop and making its background transparent. That's the whole trick there's to it.
Tip: save that picture to your HD and see by yourself. That's probably just an squared image with transparent background, or maybe it has the current background cut nicely to fit there.
You can do it, but only in Firefox 3.5+ and Safari 3.2+ (and recent webkit based browsers). Both provide browser specific CSS extensions for skew: -moz-transform and -webkit-transform respectively.
Here's a nice example that builds a 3d looking cube out of divs: (from http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/)
<div class="cube">
<div class="topFace">
<div>
Content
</div>
</div>
<div class="leftFace">
Content
</div>
<div class="rightFace">
Content
</div>
</div>
And CSS:
.cube {
position: relative;
top: 200px;
}
.rightFace,
.leftFace,
.topFace div {
padding: 10px;
width: 180px;
height: 180px;
}
.rightFace,
.leftFace,
.topFace {
position: absolute;
}
.leftFace {
-webkit-transform: skewY(30deg);
-moz-transform: skewY(30deg);
background-color: #ccc;
}
.rightFace {
-webkit-transform: skewY(-30deg);
-moz-transform: skewY(-30deg);
background-color: #ddd;
left: 200px;
}
Yes, with CSS3 you can:
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
Supported by all the modern browsers and IE9+.
See CSS transform on MDN for more information.
To my knowledge you can not do that. Are you sure the image you are thinking of isn't tilted in Photoshop or similar and just added to the page like that?
You can use Apple specific CSS attributes (soon to be ratified, and then they'll remove the webkit prefixes for them) to do this and animation effects, but it will only show up in Safari and Chrome right now. Still, they look quite pretty and CSS is simple to do.
Right now it's probably just done in Photoshop, and nicely anti-aliased there as well, so that it has a consistent cross-browser appearance.
We are doing something similar at work, we have to do it on the fly.
You can't do it with just html/css, however we are using an image library through a php script to generate them automatically, and then make the background transparent.
Use a PHP GD Library. Makes things so much easier.
No. You can't.
Tilting images and text is still JavaScript juju.
Edit: Or, at least, you couldn't with CSS2. Starting with CSS3, there's the transform property, which includes rotations.