Entry #7 : Sliding Image Panels
This code will cause background images to act as panels and be animated when you click on a label. This will give your homepage a very unique and visually appealing look that is very easy to navigate through.
The HTML will contain 3 parts: the radio buttons and the labels, the container, and the titles.
<section <span style="color: #225588;" _mce_style="color: #225588;">class</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"cr-container"</span>>
<!-- radio buttons and labels -->
<input <span style="color: #225588;" _mce_style="color: #225588;">id</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"select-img-1"</span> <span style="color: #225588;" _mce_style="color: #225588;">name</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"radio-set-1"</span> <span style="color: #225588;" _mce_style="color: #225588;">type</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"radio"</span> <span style="color: #225588;" _mce_style="color: #225588;">class</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"cr-selector-img-1"</span> <span style="color: #225588;" _mce_style="color: #225588;">checked</span>/>
<label <span style="color: #225588;" _mce_style="color: #225588;">for</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"select-img-1"</span> <span style="color: #225588;" _mce_style="color: #225588;">class</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"cr-label-img-1"</span>>1</label>
<input <span style="color: #225588;" _mce_style="color: #225588;">id</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"select-img-2"</span> <span style="color: #225588;" _mce_style="color: #225588;">name</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"radio-set-1"</span> <span style="color: #225588;" _mce_style="color: #225588;">type</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"radio"</span> <span style="color: #225588;" _mce_style="color: #225588;">class</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"cr-selector-img-2"</span> />
<label <span style="color: #225588;" _mce_style="color: #225588;">for</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"select-img-2"</span> <span style="color: #225588;" _mce_style="color: #225588;">class</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"cr-label-img-2"</span>>2</label>
<input <span style="color: #225588;" _mce_style="color: #225588;">id</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"select-img-3"</span> <span style="color: #225588;" _mce_style="color: #225588;">name</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"radio-set-1"</span> <span style="color: #225588;" _mce_style="color: #225588;">type</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"radio"</span> <span style="color: #225588;" _mce_style="color: #225588;">class</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"cr-selector-img-3"</span> />
<label <span style="color: #225588;" _mce_style="color: #225588;">for</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"select-img-3"</span> <span style="color: #225588;" _mce_style="color: #225588;">class</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"cr-label-img-3"</span>>3</label>
<input <span style="color: #225588;" _mce_style="color: #225588;">id</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"select-img-4"</span> <span style="color: #225588;" _mce_style="color: #225588;">name</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"radio-set-1"</span> <span style="color: #225588;" _mce_style="color: #225588;">type</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"radio"</span> <span style="color: #225588;" _mce_style="color: #225588;">class</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"cr-selector-img-4"</span> />
<label <span style="color: #225588;" _mce_style="color: #225588;">for</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"select-img-4"</span> <span style="color: #225588;" _mce_style="color: #225588;">class</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"cr-label-img-4"</span>>4</label>
<div <span style="color: #225588;" _mce_style="color: #225588;">class</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"clr"</span>></div>
<!-- panels -->
<div <span style="color: #225588;" _mce_style="color: #225588;">class</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"cr-bgimg"</span>>
<div>
<span>Slice 1 - Image 1</span>
<span>Slice 1 - Image 2</span>
<span>Slice 1 - Image 3</span>
<span>Slice 1 - Image 4</span>
</div>
<div>
<span>Slice 2 - Image 1</span>
<span>Slice 2 - Image 2</span>
<span>Slice 2 - Image 3</span>
<span>Slice 2 - Image 4</span>
</div>
<div>
<span>Slice 3 - Image 1</span>
<span>Slice 3 - Image 2</span>
<span>Slice 3 - Image 3</span>
<span>Slice 3 - Image 4</span>
</div>
<div>
<span>Slice 4 - Image 1</span>
<span>Slice 4 - Image 2</span>
<span>Slice 4 - Image 3</span>
<span>Slice 4 - Image 4</span>
</div>
</div>
<!-- titles -->
<div <span style="color: #225588;" _mce_style="color: #225588;">class</span>=<span style="color: #be516e;" _mce_style="color: #be516e;">"cr-titles"</span>>
<h3>
<span>Serendipity</span>
<span>What you've been dreaming of</span>
</h3>
<h3>
<span>Adventure</span>
<span>Where the fun begins</span>
</h3>
<h3>
<span>Nature</span>
<span>Unforgettable eperiences</span>
</h3>
<h3>
<span>Serenity</span>
<span>When silence touches nature</span>
</h3>
</div>
</section>
It will look like this!
For more information, you can go to http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/
Entry #6 : Slide Down Menu Box
This creative code will give your nav bar a much more visually appealing look. It keeps the drop down menu looking clean and organized, but also gives it a more interesting look that will hold the user’s attention.
The idea is to make a box with the menu item slide out, along with a popped up thumbnail. There is also a submenu box with more links.
The HTML includes an unordered list where each menu item contains the main link and a div element.
<ul id="sdt_menu"class="sdt_menu">
<li>
<a href="#">
<img src="images/1.jpg"alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Portfolio</span>
<span class="sdt_descr">My work</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Websites</a>
<a href="#">Illustrations</a>
<a href="#">Photography</a>
</div>
</li>
...
</ul>
For the CSS, you can start by styling the unordered list.
ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}
The Javascript:
$(function(){
$('#sdt_menu > li').bind('mouseenter',function(){
var$elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var$sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var$elem = $(this);
var$sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
The final image will look like this!
Entry #5 :
CSS3 Animation Menus
In order to add some creativity and visual appeal to your homepage menu, one way to do this is to add animated hover effects. The main idea is to include an icon, a main title, and a secondary title that will animate when you hover over it.
The HTML structure will be an unordered list that looks like this:
For the CSS, it will include the symbol typeface for the icon.
If you want to add some animations for the content elements, you must animate them from top to bottom using the code below.
.ca-menuli:hover{
background: #e1f0fa;
}
.ca-menuli:hover.ca-icon{
font-size: 40px;
color: #259add;
opacity: 0.8;
text-shadow: 0px 0px 13px #fff;
}
.ca-menuli:hover.ca-main{
opacity: 1;
color:#2676ac;
animation: moveFromTop 300ms ease-in-out;
}
.ca-menuli:hover.ca-sub{
opacity: 1;
animation: moveFromBottom 300ms ease-in-out;
}
The final product will have all three elements being animated: The icon, the main title and the secondary title. This is a very useful code if you want your navigation menu to have a more creative and modern look to it. Below, you will see what the menu bar will look like!
For more information and to see what the animation looks like, go here.
Entry #4 : CSS Gradients
CSS gradients is a new <image> type in CSS3. This is a very useful code because it allows you to create a smoother and easier transition between different colors. It is much easier to use CSS gradients instead of images to make color transitions, and it looks much more attractive when zoomed in because it is generated by the browser.
The two kinds of gradients are linear and radial.
Linear gradients require a starting point and direction you want the transition to move in. The simplest one is from side to side or top to bottom.
It is defined by the code below. In the end, the gradient will look like this:
/* The old syntax, deprecated and prefixed, for old browsers */
background: -prefix-linear-gradient(top, blue, white);
/* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Firefox 16, Chrome 26, Safari 6.1), without prefix */
background: linear-gradient(to bottom, blue, white);
It is defined by the code below. In the end, the gradient will look like this:
Radial gradients are used with the radial-gradient() functional notation. It is similar to the linear gradient, but you can change the shape. Using the code below…
background: radial-gradient(red, yellow, rgb(30, 144, 255));
…your gradient will look like this!
To learn more information, go here.
Entry #3 : Javascript Dates
This code allows you to incorporate dates in your site. The date options allows us to work with years, months, days, hours, minutes, seconds, and milliseconds. They are created with the new Date() constructor, and below are four ways to initiate a date: Use the code below to display the current date and time in your site!
new Date()
new Date(milliseconds)
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)
Use the code below to display the current date and time in your site!
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>
More information here.
Entry #2 : Fixed Background Image
This code allows you to insert a background image to your website without the image moving as you scroll. The example below includes the code of an image that has a fixed position. Just paste the url of your image in place of the "w3css.gif" which is a <style> code, and write the content of your page in the <body>. The image will not move with the content.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("w3css.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>If you do not see any scrollbars, try to resize the browser window.</p>
</body>
</html>
More information here and here.
Entry #1 : Geo-location API
This code allows a user to view their geographical location. Because this may compromise privacy, the position is not available unless the user approves it. This code will be used in the <body> section of the code.
Use and edit the code below in order to get the coordinates of your location.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
First, check to see if geolocation is supported. If it is supported, run the getCurrentPosition() method and it should show the coordinates in the showPosition() function. This will display the longitude and latitude.
If the getCurrentPosition() method is successful, certain properties like longitude and latitude are returned. Displayed below are other properties returned if they are available.
| Property | Description |
|---|
| coords.latitude |
The latitude as a decimal number |
| coords.longitude |
The longitude as a decimal number |
| coords.accuracy |
The accuracy of position |
| coords.altitude |
The altitude in meters above the mean sea level |
| coords.altitudeAccuracy |
The altitude accuracy of position |
| coords.heading |
The heading as degrees clockwise from North |
| coords.speed |
The speed in meters per second |
| timestamp |
The date/time of the response
|
You can find out more information on geolocation here.
Comments (6)
Lori said
at 12:00 pm on Feb 24, 2015
0/4. Missing entry #1
Lori said
at 8:24 am on Mar 31, 2015
Entry #3: 3/4. Thank you for posting. Be sure to include an image of the final product. Also, try to be a little more detailed with your instructions. Where does the code for this date go in the file?
Lori said
at 8:25 am on Mar 31, 2015
Entry 1 & 2: 4/4. Great posts, I am really interested in trying out the geo-location
Lori said
at 8:47 am on Apr 9, 2015
Entry #4: 0/4. Incomplete
Lori said
at 7:55 am on May 20, 2015
Entry #5: 0/4, Incomplete
Entry #6: 0/4, Incomplete
Lori said
at 1:07 pm on Jun 5, 2015
Good job catching up, thank you!
You don't have permission to comment on this page.