by Bleachzor Sat Jan 09, 2010 2:50 pm
It looks nice, but it looks slightly different from what I expected.
However... I can't say im fully satisfied yet.
Is it possible to turn the background gradients into links aswell?
so that the entire panel functions as a single link.
I guess in your opinion using image-corners like in several other hitskins (with small .gif/.png images) would take too much effort for just 2 panels.
In the designsketch which I showed in the first post I also mentioned "Should be able to be devided cut 2 parts" like this for example:
that was the actuall idea xD.
Is it not possible to move the banner .png image down for 5 px?
sorry for the delay everytime, our timezones dont really match + I've got other things to do aswell.
I can't help it but, I still intent to reply asap everytime
*I wanted to make a homepage which would perfectly fit even within a resolution of 600*800px and I wanted to make it usefull for people with a slower internet connection. So I decided to make 2 buttons for the time being(1 big one on top and 1 small one below). Later on I would make it 3(1 big one on top and 2 smaller ones below it left and right).
Even if the .png image banners would not load fast enough then i'd still have the gradient pieces+corners, which should load fast, even on a slow internet connection. So people would allready know where to click (when using the homepage more often) even if the banners wouldn't be fully loaded. This would be an advantage compared to using 3 images only.
I mean corners like this:
- Code:
span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
font-size: 1px;
line-height: 1px;
display: block;
height: 5px;
background-repeat: no-repeat;
}
span.corners-top {
background-image: none;
background-position: 0 0;
margin: 0 -5px;
}
span.corners-top span {
background-image: none;
background-position: 100% 0;
}
span.corners-bottom {
background-image: none;
background-position: 0 100%;
margin: 0 -5px;
clear: both;
}
span.corners-bottom span {
background-image: none;
;
background-position: 100% 100%;
}
.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
margin: 0 -10px;
}
span.corners-top {
background-image: url("http://i19.servimg.com/u/f19/14/69/22/94/corner10.png");
}
span.corners-top span {
background-image: url("http://i19.servimg.com/u/f19/14/69/22/94/corner11.png");
}
span.corners-bottom {
background-image: url("http://i19.servimg.com/u/f19/14/69/22/94/corner10.png");
}
span.corners-bottom span {
background-image: url("http://i19.servimg.com/u/f19/14/69/22/94/corner11.png");
}
/***************************************************************/
#cp-main span.corners-top {
background-image: url("http://2img.net/i/fa/prosilver/corners_left2.gif");
}
#cp-main span.corners-top span {
background-image: url("http://2img.net/i/fa/prosilver/corners_right2.gif");
}
#cp-main span.corners-bottom {
background-image: url("http://2img.net/i/fa/prosilver/corners_left2.gif");
}
#cp-main span.corners-bottom span {
background-image: url("http://2img.net/i/fa/prosilver/corners_right2.gif");
}
/***************************************************************/
#cp-main .panel #topicreview span.corners-top {
background-image: url("http://i19.servimg.com/u/f19/14/69/22/94/corner10.png");
}
#cp-main .panel #topicreview span.corners-top span {
background-image: url("http://i19.servimg.com/u/f19/14/69/22/94/corner11.png");
}
#cp-main .panel #topicreview span.corners-bottom {
background-image: url("http://i19.servimg.com/u/f19/14/69/22/94/corner10.png");
}
#cp-main .panel #topicreview span.corners-bottom span {
background-image: url("http://i19.servimg.com/u/f19/14/69/22/94/corner11.png");
}
SORRY!!! (please dont mind the double post)
*=edit
Hitskin.com
Facebook
Twitter
Pinterest
Youtube
