This time tutorial-webdesign.com will try to make a menu whose position is always on top (fixed) after the web page is scrolled, not just above, the menu that was previously integrated with this website page will change color as well. The point here we will learn how to remove and add classes to the html tag when the menu is scrolled with the help of jquery.
Slightly different from what we made earlier in the tutorial Creating a Fixed Position and Responsive Menu where we don’t need javascript for that, because we put the menu directly at the top of the website page with CSS.

To change the shape of the menu like that, of course we need Javascript to get the event when the mouse is scrolled, this time we use Jquery to practice deleting and then adding a class with another name when the website is scrolled.

Okay, let’s just make the HTML structure, here we try to use HTML5 tags for practice.

HTML Structure

The code above is our HTML structure in brief, the details will be described below each of the contents of each section.
header
The header section is generally filled with the title and description of the website (tagline).

Navigation
In this section is our menu, it’s simple, it’s just a div in which there is a menu list (ul > li)

Note that there is the class name of the div, which is named normal. This is useful for giving the main style before scrolling.

Section / Website content
This section contains the contents of the website that we created, there are several sections and we give each section according to the ID of each menu (about, services, portfolio and contact)

CSS styles
After we are done with the HTML structure that will be created, it’s time for us to start beautifying the appearance by using CSS, there is no special css that we need because this is only for demo purposes.

Initial CSS
this is used for global or whole, actually it is not complete, usually for global we need to normalize, css reset or something else to make it better, but this is only for demo.

/* Global

That’s how the css sequence we make. Continue with Javascript

Javascript
To be able to change the .normal class to .fixed, so that the menu display changes we need Javascript, here we have previously inserted Jquery of course in the head and /head sections.
Then we create a javascript file with the name twd-menu.js with the contents as below.

It can be seen there that we will first delete the normal class, then add the fixed class, so when the normal class is deleted of course the style we wrote in the css for the .normal class is no longer useful, what is used is the css code for the .fixed class, where the contents are position: fixed to make the position unchanged and width:100% to fill the width of the monitor screen.

Results
Here is the result that has been created, you can view and download the code from Github.

Please note this is only for demo purposes, so we don’t embellish all parts with CSS.

Learning HTML5 Watching video tutorials and examples is a good thing, there are many ways to learn, including reading, asking, listening and seeing. This time we will try to learn by watching videos about HTML5 that we may not know about.

Many people say HTML5 is the future of websites, the new features of HTML5 are quite a lot. HTML5 when combined with CSS3 will be very good results, coupled with knowledge of JavaScript it will produce something powerful.

HTML5
Image by slavik_V

HTML5 features such as Canvas, Local Storage, Web SQL Database, Drag & Drop, Web Socket, Audio, Geo Location, Input type (Validation), Semantic Markup, and others are worth learning immediately.

Here we can see how and what we can learn from HTML5.

What is HTML5?

Tomomi Imura, “Mobile Web: Real Life Examples of HTML5 for Mobile”

Learn About HTML5 and the Future of the Web

Introduction to HTML 5

HTML5 versus Android: Apps or Web for Mobile Development?

Google I/O 2011: HTML5 & What’s Next

HTML5 Showcase for Web Developers: The Wow and the How

HTML5 video accessibility and the WebVTT file format

HTML5 + CSS3 = Awesome

What’s New in HTML5, CSS3, and JavaScript
vimeo.com/33644453

so much
That’s enough writing this time, I hope you are inspired to make something with HTML5.

If there is input, please leave your comment, if there is an interesting video, please include a link in the comments section.

Greetings Indonesian web design

Image Credit: slavik_V

Creating a sound menu or having a sound effect when the mouse hovers using HTML5 Audio is our discussion this time.

In the past we needed to use Flash to create sound effects like this, looking very sophisticated. But now with the presence of HTML5 which is sophisticated enough to make things easier, we don’t need to make it with flash, and we don’t need to also install Flash Player on our computers, flash players like this can also harm computers because they are vulnerable to malware insertion.

For inspiration you can see some websites that are made using HTML5.
html5 audio menu
Okay, straight to the topic, we will make a menu that when the mouse hovers it will make a sound, for that we need some ingredients 🙂 #LikeCookingSaja.

Resources
jquery
Sound files you can find in soundible
Robot pictures for background
HTML
First we create the HTML structure first, write it as below.

Robot HTML5 Audio on Menu

A robot is a mechanical or virtual artificial agent, usually an electro-mechanical machine that is guided by a computer program or electronic circuitry… read more..

It should be seen there that we insert an audio tag with the ID soundBeep, which contains the source file.

You can see an explanation of the Audio tag on the W3 website.

Javascript (Jquery)
We need Jquery to instruct it to play the audio that is in the soundBeep ID when the mouse hovers. The script is as below, and is placed at the end before the /body tag.

var soundBeep = $(“#soundBeep”)[0];
$(“nav a”).hover(function() {
soundBeep.play();
}, function(){
soundBeep.pause();
});
Styling (CSS)
To make it look attractive we beautify it with CSS.

CSS for Robot Background.

body{
background: url(robot.jpg);
background-size: cover;
}

• There we use background-size: cover to make the image full.

For the menu we beautify with the following script.

For those of you who don’t really understand, you can type it yourself and see the results line by line.

There are various ways to display or find out the number of Twitter followers, using Javascript (Jquery) or PHP.

The usefulness of displaying the number of followers also varies, apart from personal statistics, displaying the number of followers is also to make others believe that the website is serious, so it is not uncommon for many people to use the services of a certain person/company to increase the number of followers (we do not will discuss that here).

Previously, tutorial-webdesign.com also discussed how to display the Twitter timeline on a website page, this trick can be combined if needed.

twitter computer
Image credit: Lakeshorebranding.com

Okay, straight to the topic, here we will use PHP to display the number of followers. Enough with just 4 lines of PHP code.

PHP
Create a file with the name twitter_followers_count.php , and fill it as follows

$twitter_id = “tut_web”;
$url = “http://twitter.com/users/show/$twitter_id”;
$response = file_get_contents ( $url );
if(empty($response)){
$count = 0;
}else{
$t_profile = new SimpleXMLElement ( $response );
$count = $t_profile->followers_count;
}
To display it on the web page, simply print it as usual.

If you want, you can create a special method/function to make it easier to call.

echo $count;
The results that will appear are as follows

Here the results we have designed a little, but are not explained in the tutorial because it is too long because the point is what is written in this tutorial. But can be downloaded if you want to see.

Creating a Paper Stack Effect with CSS3 has many uses, it’s not wrong to learn because this technique is quite used in the web design world, for example a few months ago I once got a project to create a website for a short article writing contest, and asked for the layout. Like paper, however, designers have to make sense to make it as similar to paper as possible, there are many ways, but this simple one is their choice because it is considered simpler and easier to read.

At that time I also made the project with the trick of Limiting Text Input With Jquery so that articles could only be written as much as 500 characters, from there many things can be learned and can be written in several tricks. One of them is the display of the paper effect with this css3.

HTML Structure
OK, let’s get started with the necessary HTML structure, create an HTML file and name it paper-effect.html.

paper-effect

Create the html structure as usual, and in the body we simply create a div with the paper class.

Demo: Paper Stack

Tutorial-Webdesign.com

Back to tutorial

CSS
To beautify us using CSS, here what we need to learn is CSS Box Shadow because to create the stack effect it actually uses several shadow effects with different distances, here we make the demo shadow farther and farther, so that it forms like paper piled up.

The format for writing box shadow css is as follows:

box-shadow: 1px 2px 3px 4px #555;

1px = Horizontal Offset

2px = Vertical Offset

3px = Blur Radius (optional)

4px = Spread Radius (optional)

555 = Color

And here is the complete css code from the demo we made

It can be seen that the values ​​are 1 to 10 on the horizontal and vertical sections, and the black and white colors are written on rgba(0,0,0,..) and rgba(255,255,255,..)

there using rgba so that the thickness of the color can be determined, or we can say the opacity of the color.

The width and length can be determined according to your needs.

Browser Support

This effect works in all recent browsers, but does not work in Opera Mini.

Results

Here are the results that have been made

Demo | Download Code
so much

So many tutorials this time, hopefully useful for all of you,

Greetings Indonesian web design.

Beautifying the header with a moving / walking cloud effect is quite interesting to apply on the website that is being worked on.
Making it is also quite easy, the results will also provide a plus for our website, because this includes elements that can make people feel at home on your website while enjoying the animation (UX).

To make it we actually only need skills using css, because it takes a little knowledge of some of the functions in css3, such as box-shadow, animation, transform, border-radius.

The application can be anywhere, but usually in the header because the cloud is located above, the number of clouds can be adjusted to the needs of the website and made integrated with the existing website, the shape of the cloud can be adjusted to the needs

Start with HTML
Okay, let’s just start by creating an index.html file and write the following html script.

Tutorial-webdesign.com is a website for Indonesian Web Designers & Web Developers, and Indonesian Graphic Designers.

This website contains tutorials, tips & tricks, articles, inspiration and resources related to the world of design.

Everyone can participate as a writer here

It can be seen that if we create ID #sky which will be used as an area for pacing the cloud, and CLASS .main for website content. ID #sky will contain 5 clouds, each of which is assigned a class with its number.
For the form of the layout can be adjusted to your wishes and needs.

Styling with CSS
Next we will beautify with css so that everything can work as expected.

This morning idly trying CSS without HTML and spreading a demo link to twitter, Facebook Fan Page Tutorial Web Design, and several groups, apparently quite a lot of responses and curious how to make it, how come the text appears on the web page but in the HTML it doesn’t write nothing when in VIEW Source with Mozilla, it can be with pseudo code ::before in css.

CSS Without HTML
No tag link rel=””

But the more interesting thing is, how can a style.css be run by HTML without the link rel=”..” tag to the css.

Some are quite observant and good at searching on google and finally find the trick, but many are still curious.

—————
Discussion
—————

RFC 5988 defines a Link HTTP Header, which allows you to send a element via an HTTP Header without including HTML. As an example:

Link: ;rel=prefetch
Which will have the same effect as placing this in your HTML:

Similarly, RFC 5988 makes it possible to include stylesheets in HTML documents without using anything other than HTTP headers:

Link: ;rel=stylesheet
the result will be the same as

Such is the theory. In practice, not many browsers implement the Link header. As of this writing, only Opera and Firefox support this.

Just practice

Create style.css with code like this
html{
backgrounds: #066968;
padding: 1em;
}
body{
border: 5px dotted #eee;
color: #fff;
font: 3em/1.5 sans-serif;
padding: 1em;
width: 10em;
margins: 0 auto;
}
body::after{
content: ‘Hello I’m TWD, I made it without a script, Please “View Source” to see the code 🙂 , how come it’s empty?’;
/* Support in Firefox 3.6.x. */
}
and an index.php file with contents like this

[php 1=”header(‘Link:” 2=”;” 3=”rel=stylesheet’);?>” 4=”[/php” language=”<?php”][/ php]

Results
For those who have been curious since this morning, download the sample script here 🙂 hopefully the curiosity will disappear.

For demos can be seen with Mozilla Firefox and Opera, by doing View Source.

Conclusion
This trick is just for fun, we just need to know that this trick exists. But it’s not a good idea to use this in your website projects, The no-HTML ‘hack’ is all kinds of evil, so it’s unlikely that any developer will seriously use this on the official site.

Greetings Web Development Indonesia

This tutorial will discuss How to Create a Simple Grid Layout Using LESS, basically LESS is a very dynamic css extension, commonly called a css preprocessor, LESS can also create variables, mixins, operations and functions as well as other extensions such as Sass. The advantages of LESS compared to Sass, in LESS we only need to use less.js which is inserted on the website page, and while Sass must first install it on the computer.

Grid
Image By: Ollesvensson

Creating a Grid in LESS:
First we have to download less.js at http://lesscss.org/
Second we create an htdocs or www folder example:GridLess
Moving the less.js file that we have downloaded, move to the GridLess folder.
Create a grid.less file in the GridLess folder.
We open the grid.less file and its contents are as follows:
First: We Create Variables

[css]/create variables/
@colom:12;[/css]

Second, make a clearfix mix, we can see on this website http://nicolasgallagher.com/micro-clearfix-hack/

[css]/create a clearfix function/
.clearfix(){
*zoom: 1;
&:before,
&:after{
content: ” “;
display: table;
}
&:after{
clear: both;
}
}[/css]

Third we set the box-sizing

Read more about box-sizing here

/* create box size */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Fourth: Create container and row:

/Create Container and Row/
.container{
.clearfix();/Call the clearfix function/
margin-right: auto;
margin-left: auto;
}
.row {
.clearfix();/Call the clearfix function/
margin-left: -10px;
margin-right: -10px;
}
Fifth: Creating Columns

Has anyone heard of flexbox?
Yep, flexbox is indeed a powerful css3 module for managing layouts. For those of you who have never heard of it, don’t panic, this is your chance to catch up what is flexbox is.

Flexible Layout (Flexbox) is a css3 module (not properties, because it consists of a set of properties) which aims to provide flexible layout, aligning, and spacing settings between items in a container. We can position an item (it can be anything; div, span, section, ul, li, a, etc) without even knowing the dimensions of the item (that’s why it’s called flex, because it’s flexible).

What do you use Flexbox for?
The main idea behind the creation of flexbox is to give containers the ability to adjust the length, width, and order of the items in it with the aim of maximizing the available space. This is important for developers to know because today’s requirements include many dimensions in various devices and resolutions.

Ok, now you know & have a reason why you should use flexbox in your coding. Get to the point. Here we go.

flexbox concept
Flexbox is applied to a container which is then called Flex Container. In one container there are items whose number can be more than one. These items are called Flex Items. It should be noted, flexbox plays a parent and child relationship. The element that becomes a flex item must be a direct child of a flex container element.

Screen Shot 2013-08-27 at 5.00.54 PM

Flexbox has its own coordinate system, namely
Main Axis : horizontal line that runs from left to right (by default)
Cross Axis: vertical line that stretches from top to bottom (by default)

Flex items stand on a line called the Flex Line. Flex line can be horizontal or vertical depending on the determination in the flex direction properties. Basically, the items made will be along the flex line from main-start to main-finish or from cross-start to cross-finish.

Flexbox Properties
At the beginning we were told that flexbox is a set of properties, not just one. To set flex items provided various properties. These are some.

Display: flex | inline-flex | flexbox (parent element)
This property is the most important prop. This is aimed at the container element. The goal is to specify that the target element is a flex container. Without declaring this, all other flexbox props are meaningless.

display : flex | inline-flex | other values
Take note:

– float, clear, vertical-align have no effect samsek on flex items.
– css fields, as usual, don’t apply in flex containers

Flex direction (parent element)
Determines the direction of the flex container’s coordinates whether it propagates horizontally (row) or vertically (column). For more details can be seen here. The existing values ​​include row, column, row-reverse, and column-reverse.

flex-direction: row | row-reverse | column | column-reverse
Flex wrap (parent element)
Specifies the number of lines in the flex container, whether single line or multi line. In addition, it determines the direction and position of the cross axis to set where the new item will be placed. Existing values ​​include wrap, nowrap, wrap-reverse

flex-wrap: nowrap | wrap | wrap-reverse
Flex flow (parent element)
This is a shorthand form of the above 2 properties (direction & wrap). Shorthand is very common for developers because of the effectiveness & simplicity of DOM.

code

flex-flow: <‘flex-direction’> || <‘flex-wrap’>
Justify content (parent element)
Specifies the arrangement of flex items along the main axis. This prop adjusts the position of the items and makes use of the available empty space. Available values ​​include flex-start, center, flex-end, space-between, and space-around.

code

justify-content: flex-start | flex-end | center | space-between | space-around
Screen Shot 2013-08-27 at 5.01.04 PM

Align items (parent element)
Determines the position of the flex item along the cross axis line. This prop is similar in function to justify content, only the direction is different, namely perpendicular or axis. Available values ​​include flex-start, center, flex-end, space-between, and space-around.

code

align-items: flex-start | flex-end | center | baseline | stretch
Align items flexbox

Align content (parent element)
Adjust the position of the flex line. This property will only work if the container has multi line items. The position of the flex line can be adjusted whether it is docked at the beginning, at the end, in the middle or otherwise. Values ​​include flex-start, center, flex-end, space-between, space-around, and stretch.

code

align-content: flex-start | flex-end | center | space-between | space-around | stretch
flexbox

Tutorials
To understand more, let’s get dirty on our code. You can continue to the flexbox tutorial section, here.

Have you read about the basic concepts of flexbox?

If not, you can find out what flexbox is in various sources. Google help is highly recommended. You can also read here for an explanation of the flexbox concept in general.
For the first flexbox tutorial we will create a navigation bar using flexbox.

Create simple markup representing parent (ul elements with nav class) and child (li elements) relations and display nav buttons.

Flexbox

• elements as flex items. The layout also changes to spread horizontally due to the selected direction row (and indeed this value is the default direction value). And notice, the interesting thing is that when we enlarge the viewport, the flex items will adjust to the proportional moment. We don’t need to bother adjusting the amount of space between flex items.