A few years ago, many web designers didn’t know this method. I think there are some designers which still doesn’t know this method. Therefore, i decided to write this short article.
Div elements have width and height properties and we set values of these properties as we want. However, our content can be bigger than the area that we divided sometimes. We have three choice:
1- Extending the area that we divided for div.
2- Adding a scrollbar to the div for overflowing content.
3- Hiding overflowing content.
We will talk about second choice…
Structure 1.0: If we want to add scrollbar to both of x and y Click to read complete article ->
If you used DOCTYPE in your pages, you may be in trouble with changing scrollbar color and style. Web developers usually define scrollbar properties in body tag in CSS. However, if you used DOCTYPE this is not going to work. All you need to do, defining scrollbar style in HTML tag in CSS file, and… Yes, that’s all!
Wrong Usage: Style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| body{
/*
Your other body style properties…
*/
scrollbar-base-color: #C1CBD7;
scrollbar-arrow-color: #9DACBF;
scrollbar-3dlight-color: #C1CBD7;
scrollbar-darkshadow-color: #C1CBD7;
scrollbar-face-color: #C1CBD7;
scrollbar-highlight-color: #C1CBD7;
scrollbar-shadow-color: #C1CBD7;
scrollbar-track-color: #FFFFFF;
} |
Click to Read Complete Article »
We may need to use shadows behind objects in some cases on our web sites; but browsers don’t support all shadow codes. It is possible to see the same page with different appearances via different browsers. So, we found a little solution for that.
PNG files are going to be used for giving shadow effect to elements, because PNG format gives us lots of advantages and one of them is opacity. Make a shadow image and set size of it as you want. We made a PNG file and you can download it from here.
CSS File: Style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| div.shadowbox {
padding: 0;
float: left;
display: block;
position: relative;
margin: 6px 0px 0px 6px !important;
background: url(img/shadow.png) no-repeat bottom right !important;
}
div.shadowbox ELEMENT{
margin: -6px 6px 6px -6px;
position:relative;
display:block;
} |
Simply, we made Click to Read Complete Article »
This article is short but inculding very useful information. A few years ago, we web programmers are used to make these operations via javascript. However, this wasn’t good method because, computers were not powerful enough. Nowadays, computers are too powerfull and we don’t need to use javascript anymore! Just one thing is required for us: CSS(Cascading Style Sheet).
Look at the top-right of this page. Did you see it? Let’s see how it is done…
Structure 1.0:
1
2
3
4
5
6
7
8
9
10
| < !doctype html>
<head>
<style type="text/css">
#[DIV_ID]{
position:fixed;
top:[margin-top];
right:[margin-right];
left:[margin-left];
bottom:[margin-bottom];
}</style></head><body><div id="[DIV_ID]"></div></body> |
Example 1.0: Assume that we have a div named Click to Read Complete Article »
We usually add icons to our web pages. There are a lot of different ways for doing this. For example: We can use background image, we can use unique small image files (Usually, this method is used). However, we will use the best method. Namely, Image Cropping Method using CSS.
This method makes faster our web pages. If we use many unique small image files, number of requests (that we sent to server for each image) will increase. So, loading images takes long time. However, if we use single image including all icons, size of image will increase but number of requests will decrease.
We have an image file named icons.jpg.
Original view of icons.jpg:
Structure 1.0: Click to Read Complate Article »
In this article, we are going to answer those questions:
- How to set position of background image in css?
- How to position background image using css?
- Can i set position of background image with css?
- Can css position background-image of a div?
Actually, there is a short method to do this. Look at structure 1.0:
Structure 1.0:
1
2
3
4
| #[DIVID] {
background-image:url([image url]);
background-position:[Horizontal position] [Vertical position]
} |
Example 1.0: Assume, we have a div named “ourdiv” and an image named “ourimage.jpg”.
1
2
3
4
5
6
| #ourdiv {
width: 86px;
height: 30px;
background-image: url(ourimage.jpg);
background-position: right top;
} |
Original view of ourimage.jpg:
It’s size: 259×202px
Click to Read Complete Article »
In this article, we will create an image slideshow including a lot of effects. We will use HTML and JAVASCRIPT. We have three files (functions.js, slideshow.html and style.css).
Application 1.0 (Creating an Image Slide Show with Javascript)
functions.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| var i=1;
var r=0; //This variable contains the number of loaded images.
var address='images/';
function ChangeImage(){
var ourimage=document.getElementById("slideImg");
if (document.all && ourimage.filters){
ourimage.filters.revealTrans.Transition=Math.floor(Math.random()*23);
ourimage.filters.revealTrans.stop();
ourimage.filters.revealTrans.apply();
ourimage.filters.revealTrans.play();
}
if(i>3){ // Number of our images is 4.
i=0;
}
i++;
document.getElementById("slideImg").src = address + 'slideimage-' + i + '.jpg';
}
function SetIt(){
setTimeout("ChangeImage()",4000); // ChangeImage() function is executed each 4 seconds.
}
function startSlide() {
r++;
if(r==3){// If r reaches 3 (if third image was loaded) then show the first image and set the timer for starting the slideshow with SetIt() function.
document.getElementById("slideDiv").innerHTML='';
document.getElementById("slideDiv").innerHTML='<img id="slideImg" src="' + address + '/slideimage-1.jpg" width="370" height="200" border="0" style="filter:revealTrans(duration=1,transition=12)" onload="SetIt();" />';
}
} |
style.css: Click to Read Complete Article »
Recently Typed