I wanted to know what code is used to make a background like this http://www.wareztuga.ws/
What if i want to make a to put a header like that? What code should i use?
I appreciate you help
Not sure what you mean by "different layers".
Do you mean how the flags change from dim to bright? They are just using css3 opacity filter
Something like this:
.class{ filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0; }
.class:hover{ filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7;
If you want to have an image change when you hover over it, you can use the css background-postion filter.
Let's say you have an image that is 20px Wide and 20px High. In photoshop, double the canvas height, and put second image above it. Then in css do something like:
.class{ height:20px; width:20px; background:url('your/image.png'); background-position:0px 0px; }
.class:hover{ background-position:0px -20px; } //or 20px depending on what way you want to move your background image.
Still now sure if that answers your questions.
Otherwise, the "layers" are just divs with background images set. And then children divs with different images set.
Related
I really don't know how to name my problem but I have a psd file that looks something like this:
Every item in the image above is a single image like this one:
I don't have a good specification about this, that's all I know about it. So I have been thinking maybe I can use the whole image as sprite background.
Please share your thoughts how to achieve something like this and if you are familiar please edit the question name precisely cause I could not.
Thanks
Here is an great article which accomplishes this using text-shadow: 7 Great CSS based text effects using the text-shadow property
Here is an example how it looks: Hello World example
Code:
h1 {
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
color: #9c8468;
opacity: 0.3;
font: 80px 'Museo700';
}
I didn't include the right font, but you get the idea.
This is what you do... I just did this in Photoshop, and the results are pretty good. It can be duplicated in CSS.
<img src="http://i.stack.imgur.com/o1z9H.png" id="front"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="middle"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="back"/>
Each of those images should be a different color. Front, as it is. Middle, dark gray, and back, white.
Use CSS is place them in the same spot, but offset by a couple of pixels.
#front {
top:5px;
left:5px
}
#middle {
top:3px;
left:5px
}
#bottom {
top:7px;
left:5px
}
CSS now has filters. (not yet fully supported)
view example
view notation
You can use drop-shadow
box-shadow even with transparent .svgs kept the retangular shadow.
works like text-shadow but for vector images (.svg)
side note: Since it's not yet fully supported, use an image editing software.
I have a tile on my website that flips over when i hover over it. On the back of the first i attempted putting a button. The button hangs off of the bottom and im not quite sure how i can get it below the paragraph i have on the back of the tile. Also, i can't get the header of the tile centered. I tried using
text-align:center;
but that doesn't seem to work.
Here's the code i'm writing up. So if you run it and hover over the first black tile you'll see the text 'eternally rustled'. That's the problematic tile. Any help would be appreciated. Thanks.
I think I have your fix! Using what you gave us I just added two things to the "btile" portion of the CSS so it looks like the one below:
#btile {
width:350px;
text-align:center;
}
and to fix your header problem, I simply added width to the code below:
.webname {
width: 350px;//I added this
font:800 17px/17px"open sans";
color:#333;
text-transform:uppercase;
text-align:center;
border-top:1px dashed #888;
z-index:50;
position:absolute;
text-align:center;
}
Where does the width come from? It's the size of your picture! Just make sure the div width is the same size of the picture and you're set. Here is a JsFiddle that can show you exactly what I did! Let me know if it doesn't work! :)
I'd like to decorate the bottom of my page with a repeated triangle. The picture shows one triangle, but I want to fill the whole horizontal div.
Screenshot of what I've got so far: http://i.stack.imgur.com/JJA6D.png
<div class="container triangle"> </div>
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #c2cf31 transparent transparent transparent;
background-color: white;
}
Is this possible or do I have to use an img as background?
Thank you for any help.
Use a background image in your CSS-
background:url("http://site.com/img/whatever.svg");
And then set it to repeat only horizontally-
background-repeat:repeat-x;
This means that yes, you do have to use a background image.
You could clone the element using jQuery or something but I don't think it's worth it.
background-image:url('your image url');
background-repeat:repeat-x;
My opinion is to use background images in CSS if they are not being used as links etc. Basically, if you aren't fussed about the SEO on those images. With that in mind, just use some CSS for your image.
background-image: url("yoururl/image.jpg") repeat-x;
As it has been mentioned you could technically use JQuery's clone method. This is a bad idea. Why add extra things for the page to do when CSS handles it.
If you want to experiment, there's a CSS property that gives you the ability to use an element (your triangle div in this case) as a background image. This property is the background:element().
You can see a demo here in Firefox.
However, this property works only in Mozilla with the -moz- prefix but there have been attempts to work in webkit browsers as well. So, hopefully this can be implemented in the future with wider browser support.
use the img as background and let it repeat.
I have to say that I like background images more instead of the image in the html code.
This is cause people can't copy them easily as the image in the html code
Some strange behavior about background image
HTML
<body>
<div id="divGaLL">
<ul id="ulGaLL">
<li>...</li>
<li>...</li>
</ul>
</div>
</body>
CSS
body{
background:url(img/back01.jpg); //works
}
#divGaLL{
background:red; // works
background:url(img/back01.jpg); //doesn't work
}
#ulGaLL{
background:url(img/back01.jpg); //works
}
Why I can't set back01.jpg as background for #divGaLL?
That is because you are using the same property and different values. When you are using background: you can write color and image in same line
#divGaLL{
background:url(http://cdn1.iconfinder.com/data/icons/free-scuba-diving-icon-set/128/fish.png) red;
}
DEMO
The background property is a shorthand for setting a bunch of properties, including background-image. If you want to specify the background colour, or a background image, without overriding anything else, you should spell out background-color and background-image in full:
#divGaLL {
background-color: red;
background-image: url(img/back01.jpg);
}
See "background" on MDN.
Try
background:red url(img/back01.jpg) no-repeat;
You need to use
background-image: url('img/back01.jpg');
or e.g.
background: red url('img/back01.jpg') left top no-repeat;
Try to stick with this order of the "arguments" if possible ;)
I prefer to use the second way, however sometimes when you just need to change one thing it is better to use only the first approach.
It's always a good practice to define height and width and redeclare that this element is a block and not an inline style etc. if possible to prevent unwanted behaviour so use something like:
display: block;
width: 150px;
height: 150px;
background: red url('img/back01.jpg') left top no-repeat;
if #ulGaLL has a background image which completely covers it then you wouldn't see the background of #divGaLL.
Solution:
#divGaLL{
width:200px; /* Width of back01.jpg */
height:200px; /* Height of back01.jpg */
background-image:url('img/back01.jpg');
}
If you put the image in your HTML, u can use something like this:
#divGaLL img{ background-color:red;}
It will take only the IMG instead of the whole div.
And yes, do not only use background for a deffinition, since background is used for all kind of different things then only img or color.
So always use background-color, background-image or whatever you want with it
I am making a solar system in CSS, and here is my code: http://jsfiddle.net/kAKdm/.
However, it seems that :hover will only work with the sun which is the only item which does not move with CSS animations.
Does anyone know a way to make the :hover work with the planets also? I want to do something like this, but it will of course be overridden by the animation:
#planets > div:hover {
-webkit-transform: scale(1.2);
}
Thanks in advance.
Basicaly if you are scaling the planets you are changing it's width, height, top, left, border-radius properties.
scale sure is handy but since you override the transform you could try this:
#planet-venus:hover {
width:20px;
height:20px;
left: 396px;
top: 290px;
border-radius:10px;
}
You will have to calculate the width height and reposition each planet by half the ammount of scale but it works.
http://jsfiddle.net/kAKdm/21/ - try hover venus.
Chrome doesn't accept div:hover, it only accepts img:hover. So instead of #planets > div:hover, use:
#planets > div img:hover
For more details visit: http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/