css Rounded Images
Use the border-radius property to create rounded images:
code
img {
border-radius: 8px;
}
img {
border-radius: 50%;
}
css Thumbnail Image and as Link
Use the border property to create thumbnail images
code
img {
border: 1px solid green;
border-radius: 4px;
padding: 5px;
width: 150px;
}
<img src="img.jpg" alt="img">
img {
border: 1px solid green;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="img.jpg">
<img src="img.jpg" alt="img">
</a>
css Responsive Images
Responsive images will automatically adjust to fit the size of the screen. Resize the browser window to see the effect.If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:
code
img {
max-width: 100%;
height: auto;
}
To center an image, set left and right margin to auto and make it into a block element:
code
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
test1
test2
code
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:
opacity 0.2
opacity 0.5
opacity 1
(default)
code
img {
opacity: 0.5;
}
How to position text in an image:
code
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;}
.bottom left {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;}
.bottom right {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;}
.centered {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
The CSS filter property adds visual effects to an element.
code
.blur {
filter: blur(4px);
}
.brightness {
filter: brightness(0.30);
}
.contrast {
filter: contrast(180%);
}
.grayscale {
filter: grayscale(100%);
}
.huerotate {
filter: hue-rotate(180deg);
}
.invert {
filter: invert(100%);
}
.opacity {
filter: opacity(50%);
}
.saturate {
filter: saturate(7);
}
.sepia {
filter: sepia(100%);
}
.shadow {
filter: drop-shadow(8px 8px 10px yellow);
}
CSS can be used to create image galleries. This example use media queries to re-arrange the images on different screen sizes. Resize the browser window to see the effect.
The following image gallery is created with CSS:
div.img {
margin: 5px;
border: 1px solid green;
float: left;
width: 100px;
}
div.img:hover {
border: 1px solid green;
}
div.img img {
width: 100%;
height: auto;
}
div.wer {
padding: 15px;
text-align: center;
}
<div class="img">
<a target="_blank" href="test.jpg">
<img src="test.jpg" alt="test" width="100" height="100">
</a>
<div class="wer">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="test.jpg">
<img src="test.jpg" alt="test" width="100" height="100">
</a>
<div class="wer">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="test.jpg">
<img src="test.jpg" alt="test" width="100" height="100">
</a>
<div class="wer">Add a description of the image here</div>
</div>
<div class="img">
<a target="_blank" href="test.jpg">
<img src="test.jpg" alt="test" width="100" height="100">
</a>
<div class="wer">Add a description of the image here</div>
</div>
Move your mouse over the image
code
img:hover {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
All Basic HTML5
HTML is the main markup language for web pages, and its elements are the basic building blocks of web pages. HTML is written in the form of HTML elements consisting of tags enclosed in "greater than" and "less than" symbols within the content of the web page.
All Basic CSS3
CSS (Cascading Style Sheets) is a computer language that belongs to the category of style sheet languages used to control the appearance of a document written in a markup language.It is used to control the appearance of a document written in HTML and XHTML, that is, to control the appearance of a web page and a website in general.
js JAVASCRIPT
Javascript is a set of computer software and specifications developed by James Gosling at Sun Microsystems, later acquired by Oracle Corporation, which provides a system for developing application software and its development in a multi-platform computing environment.
CREATIONS
In this chapter I call creation I will present you creations html, css and javascript that are very useful and creative in a web site. You can get them ready-made with Netbax creations or create them yourself as you wish with the help provided by the Netbax editor.
NAVIGATION Bar
having easy-to-use horizontal & vertical menu is important for any web site. with css you can transform boring html menus into good-looking horizontal & vertical bars. horizontal & vertical menu is such an important part of your website. it’s how your visitors navigate to the main areas of your site and makes it easy for them to find.
WEB BUTTONS
Collection of hand-picked free HTML and CSS button code examples.In this article, we'll see some really cool looking responsive buttons using only a few lines of CSS.You are free to copy, modify and use this code as you wish.All the buttons shown here can scale accordingly to the font-size attribute, and should work in any relatively recent browser.