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).

Cloud
Photo by Kamil Porembiński

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

Back to tutorial

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.

Creating a landing page website with scrolling pages using jquery will be discussed in this tutorial.

The website model that will be created can be used for a company profile website, just adjust it to your needs. The website design in this demo may look like a website with a flat design theme, because the colors used are similar to the colors commonly used in flat design, the colors used in the demo that we will make are taken from the colors in the tutorial-webdesign.com logo

one page scroll
Display to be created

Inspiration

What we are going to make is actually inspired by Apple’s iPhone 5s and iPhone 5c website, where on the website every time we scroll, the page will move pages by detecting the mouse when scrolling. And that’s the effect we’re going to try to create.

HTML
We start by creating an HTML structure for the website layout that will be crea

The content on the tutorial-webdesign.com website is mostly related to website creation

Design • Indonesia

The world of design is also a field that is widely studied at tutorial-webdesign.com, not only web design, but also other things related to the world of graphic design

For that we invite those of you who are engaged in the world of web design & development or the world of graphic design to contribute knowledge in tutorial-webdesign.com by becoming a writer.

If we see that there is nothing special about the markup, there we only create a header and three for sections which will later function as pages, so there are 3 pages.

Website headers

In the head and /head sections we insert Jquery (javascript framework), OnePageScroll.js (jquery plugin), and the Righteous & Voltaire font that we embed from Google Web Fonts.

Javascript(Jquery)
because we use jquery one page scroll as a plugin to make it easier for us to make the layout effect change per page when scrolling. So at the end of the html code we insert the following code:

$(“.main”).onepage_scroll({
sectionContainer: “section”
});
There it is clear if we specify the section tags in the .main class which will be used as website pages.
besides the sectionContainer option, there are other options like:
easing to define the slide effect,
animationTime for the animation time,
pagination to show page number or not

More options can be seen in full on the OnePageScroll.js github page

CSS
So that the page looks neat, we beautify it with CSS, here we deliberately create three sections so that it is easy for you to change according to the needs of each page.

CSS which stands for Cascading Style Sheets is a collection of code that is used to beautify the appearance of a website, css regulates what an object should look like, what color, what shape, how big it is, and so on. CSS Usually used in html, php, asp, and others.

Image Credit by Telegraph.co.uk
Image Credit by Telegraph.co.uk

Creating CSS is quite easy. And one day I missed my CSS, where someone easily copied and pasted the css code with the View Page Source feature in the browser, I looked for ways to protect css on google. Finally I found it :D. Okay, let’s start studying it here.

For example I use css below:

.class { key:value; }
filename style.css

We rename the file to end in .php (example: style.css to style.php)

Next we change the code above to the following code:

fill css here
CSS has been protected with the help of a php session, where if the session is not found or does not match then the css code will not be displayed, but the browser will only display the words “CSS PROTECTED”, until here this code is okay, but can’t be used yet.

:: How to use

If you want to use the following code. (Put it in index.php / other), here we protect the contents of style.php whose contents are css code by using sessions in php.

Fill index / header or other
🙂 Please try.

DEMO
For a demo please see here.

OTHER TIPS
To use the CSS is quite easy. But don’t use the href link, but use @import like the following.

Disguising style.php to style.css
and a little more. The trick is to remove the .php extension and replace it with .css so that the code can be protected using .htaccess ( mod_rewrite ). How to?

Here’s How:

RewriteEngine on
RewriteRule style.css style.php
How ? You can ? Try first. Please comment if there is a problem, or do not understand.

Weakness

There is no perfect system, even this trick does not fully protect our css files, for example with the help of firebug the css code can still be seen, this is because the browser has downloaded the css script first and saved it on our computer to be processed by the browser. But this trick is still useful, even though we can’t completely make it safe, at least this is enough to make it difficult for people to copy-paste the code at will, especially those who don’t understand tools like firebug.

Reference: Sourced from a friend, DozaCrack.org, whether it’s called doza crack. hehe I asked on facebook.

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

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

First, add a little css3 view to clearly visualize what we want to learn this time.

/* // Style overalls ————————*/

• {
  box-sizing: border-box;
  }
  body {
  margins: 40px 0;
  backgrounds: #203542;
  font-size: 1.3em;
  font-family: helvetica,sans-serif;
  }
  .nav {
  margins: 0 auto;
  padding: 20px;
  width: 80%;
  border: 2px solid #1d2e3a;
  border-radius: 10px;
  backgrounds: #156596;
  list-style-type: none;

}
li {
margins: 10px;
border-radius: 10px;
background: #FFB70F;
color: #858585;
colors: #203542;
}
.nav a {
display: block;
padding: 15px;
color: inherit;
text-decoration: none;
font-weight:bold;
}
and the result is as we expected, several rectangles arranged vertically downwards to form a list.
Results

tutorial-flexbox-1

You can also see the results here in Flexbox Basic which I wrote with an account (@arwasil) on CodePen.

After that, we add flexbox properties by adding ;

/* // STATE Flexbox ————————*/

.nav {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content:space-between;
-webkit-flex-wrap: wrap;
}
To avoid cross browser problems don’t forget to add -webkit , -moz, -ms and -o . prefixes

See the difference?
You can see at the following address
Flexbox Modules creates a nav class flex container with 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.

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.

Creating a Grid in LESS:
First we have to download less.js in Second we create 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

Second, make a clearfix mix, we can see on this website

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;
}

Kita buat file HTML index.html pada folder GridLess dengan struktur berikut di <body> dan </body>

Equalizing the height between the two columns with css sometimes makes it difficult for web designers, the layout has been made in two columns, it turns out that when one column has enough content it will look lame, or one of them looks longer while the other one is shorter.

Well, in this article, tutorial-webdesign.com will give some tips so that the columns that are made can match or look the same in height between the left and right.

CSS Column Height
CSS Column Height

Creating HTML
First we create an example layout, here we create two columns, namely col-left and col-right.

Sidebar

Content sidebar…

Article

Details of the article…

Article

Details of the article…

There we can see that we created a .main class which includes a .col-left class and a .col-right class whose contents can be adjusted according to needs.

So that .col-left and .col-right are always visible with the same height then we add a css script as below.

CSS styling
*{margins: 0;padding: 0;}
.main{
width: 500px;
margins: 20px auto;
overflow: hidden;
}
.col-left,
.col-right{
float: left;
width: 200px;
padding-bottom: 40000px;
margin-bottom: -40000px;
background: green;
color: white;
}
.col-Right{
width: 300px;
background: yellow;
color: black;
}
If we look at the CSS code above, what’s interesting is the padding-bottom section: 40000px; and margin-bottom:-40000px; so that it doesn’t look very high with a value of 40,000px, we give the .main class overflow:hidden, so that the long part will be hidden, so now the height only depends on the text in the .main class.

Demo & Source Code
For demo and code can be seen at the following link here.

That’s it.
So many tips and tricks this time, hopefully it helps your difficulties with CSS

Greetings Web Design Indonesia

Maybe bring up a Pop Up or Overlay window that can only be done by javascript. But with the rapidly increasing power of CSS, we can create simple Pop Up windows. How to? Check it out.

First and foremost, of course, make the html markup first. Without the html file, how can it be made.

Click Me

X

Pop Up Window

This is a simple Pop Up window without javascript
This window is popped up by CSS
To close this window, click the close button on the top right

After that save it with the file name index.html or whatever. Then double click the html file.
And… Jeng.. jeng.. jeng..!!! Nothing happened. Yes, yes, we haven’t given the style yet 🙂

popup1

After that create a style.css file and save it in the index.html file folder earlier. Then Type the following script.

• {
  margins: 0;
  padding: 0;
  }

body, html {
font-family: Calibri, “times new roman”, sans-serif;
}
The style above is only for resetting the margins and padding, as well as setting the type of font used. Try refreshing your browser, surely the only thing that changes are the margins, padding, and the font type, right. That’s what we did.

popup2

Then, so that the first hyperlink looks like a real button, add the following script.

buttons {

margin: 5% auto;
width: 100px;
text-align: center;
}

button a {

background-image: linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -o-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -ms-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -moz-linear-gradient(to bottom,#2a95c5,#21759b);
background-image: -webkit-linear-gradient(to bottom,#2a95c5,#21759b);
background-color: #2e9fd2;
width: 86px;
height: 30px;
vertical-align: middle;
padding: 10px;
color: #fff;
text-decoration: none;
border: 1px solid transparent;
border-radius: 5px;
}
After saving, refresh your browser. Then there will be a button in front of you.

popup3

Then what about the Pop Up window? Be patient! Just add the following script.

popups {

width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: visible;
}

.window {
width: 400px;
height: 100px;
background: #fff;
border-radius: 10px;
position: relative;
padding: 10px;
box-shadow: 0 0 5px rgba(0,0,0,.4);
text-align: center;
margin: 15% auto;
}

.close-button {
width: 20px;
height: 20px;
backgrounds: #000;
border-radius: 50%;
border: 3px solid #fff;
display: block;
text-align: center;
color: #fff;
text-decoration: none;
position: absolute;
top: -10px;
right: -10px;
}
Try refreshing your browser. And.. Pop Up window we have successfully created.

popup4

Then how to hide it. The key is in the visibility: visible that we give the #popup div. Now we change the visibility of the #popup div to hidden. If you don’t know which one to replace, change the #popup script to something like this.

popups {

width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,.7);
top: 0;
left: 0;
z-index: 9999;
visibility: hidden;
}
After your browser is refreshed, the Pop Up window must have disappeared.

popup5

Try clicking the button, nothing will happen, right? Yes, because we haven’t added the last style as well as a key style. Add the following script.

popup:target {

visibility: visible;
}
Save, then refresh your browser. Then click the button. And.. the mission is complete. We have successfully displayed the Pop Up window. To close it, click the close button in the upper right corner (so remember the election).

So, the complete style is as follows.

Since the mission is over, I want to go first. Huh!? How come you just walk away without giving an explanation!? OK, I’ll explain.
First, we’ve made the pop up window disappear by changing visibility: visible to visibility: hidden. But that’s not enough! To bring it up we have to press the button. Because the target of our hyperlink button is #popup, so to bring it up, we need a pseudo-element (what’s a pseudo-class called!? Because the #popup div knows it will be the target of our hyperlink button. We added the :target pseudo-class to the #popup div and added the visibility: visible style, so that the #popup div reacts when the button is clicked and it becomes the target. Well, that reaction will change visibility: hidden to visibility: visible.
Then to hide the Pop Up window again, we have to click the close button. Well, the close button is the target # alias doesn’t exist. So that when the close button is clicked, it will return to its original state.

Confused huh!? Same, I just type confused. Hehe 😛

In conclusion : Simple Pop Up Window can be created with CSS even without javascript. This signifies the increasingly great ability of CSS to manipulate anything.
The conclusion of the conclusion: Happy Experimenting!

Tadi pagi iseng-iseng nyoba CSS tanpa HTML dan menyebarkan sebuah link demo ke twitter, Fan Page Facebook Tutorial Web Design, dan beberapa group, ternyata lumayan banyak tanggapan dan penasaran bagaimana membuatnya, kok bisa muncul tulisan di halaman web tapi di HTML nya tidak menulis apa-apa ketika di VIEW Source dengan Mozilla, hal itu bisa saja dengan pseudo code ::before di css.

CSS Tanpa HTML
Tidak ada Tag link rel=””

Namun hal yang lebih menarik adalah, bagaimana bisa sebuah style.css bisa dijalankan oleh HTML tanpa adanya tag link rel=”..” menuju css tersebut.

Ada yang cukup jeli dan pandai mencari di google dan akhirnya menemukan trik nya, tapi banyak juga yang masih penasaran.

—————
Pembahasan
—————

RFC 5988 mendefinisikan Link HTTP Header, yang memungkinkan anda untuk mengirim elemen melalui HTTP Header tanpa menyertakan HTML. Sebagai contoh:

Link: ;rel=prefetch
Yang akan memiliki efek yang sama seperti menempatkan ini dalam HTML Anda:

Demikian pula, RFC 5988 memungkinkan untuk memasukkan stylesheet dalam dokumen HTML tanpa menggunakan apapun selain header HTTP:

Link: ;rel=stylesheet
akan sama hasilnya dengan

Seperti itulah teorinya. Dalam prakteknya, tidak banyak browser menerapkan header Link. Sampai postingan ini dibuat, hanya Opera dan Firefox mendukung ini.

Langsung praktek saja

Buat style.css dengan kode sepert ini
html{
background: #066968;
padding: 1em;
}
body{
border: 5px dotted #eee;
color: #fff;
font: 3em/1.5 sans-serif;
padding: 1em;
width: 10em;
margin: 0 auto;
}
body::after{
content: ‘Hallo Saya TWD, saya dibuat tanpa script, Silahkan “View Source” untuk melihat kode 🙂 , kok bisa kosong ya ?’;
/* Support di Firefox 3.6.x. */
}
dan sebuah file index.php dengan isi seperti ini

Hasil
Untuk yang dari tadi pagi penasaran, download contoh script nya disini 🙂 semoga penasarannya hilang.

Untuk demo bisa dilihat dengan Mozilla Firefox dan Opera, dengan melakukan View Source.

Kesimpulan
Trik ini hanya untuk bersenang-senang, kita hanya perlu tau kalau trik ini ada. Namun bukanlah ide yang baik untuk menggunakan ini dalam proyek website anda, The no-HTML ‘hack’ is all kinds of evil, jadi sepertinya tidak akan ada developer yang akan serius menggunakan ini dalam situs resmi.

Salam Web Development Indonesia

Dengan bantuan css kita bisa membuat div yang seharusnya berbentuk kotak menjadi bentuk segitiga, hanya perlu sedikit trik dan pemahaman tentang penggunaan border di css maka bentuk segitiga bisa kita buat dengan mudah.

Pada kesempatan ini bentuk segitiga akan kita kelompokan menjadi dua bagian, yaitu arah panah yang mengarah ke atas, bawah, kanan, kiri. Sedangkan bagian kedua kita akan bermain dengan arah panah ke sudut-sudut, yaitu ke sudut kiri-atas, kanan-atas, kiri-bawah dan kanan-bawah.

Gambar Segitiga
Image by Sarah @ pingsandneedles

Mulai dengan HTML
Pada kelompok pertama (1) kita akan membuat segitiga yang arahnya berbeda-beda yaitu ke-(atas, bawah, kiri, kanan)

Pada kelompok kedua (2) segitiga yang arah panahnya ke pojok (kiri-atas, kanan-atas, kiri-bawah, kanan-bawah)

Kelompok 1

Kelompok 2

Untuk CSS nya kita buat seperti berikut ini.

/* Triangles
—————————-*/
.triangles{
overflow: hidden;
padding: 20px;
margin: 20px;
border: 2px solid #000;
}
.triangle{
margin:10px;
float: left;
}

    /* Kelompok 1 */
    .demo-arrow-up{
        width: 0; 
        height: 0; 

        border-left: 50px solid transparent;
        border-right: 50px solid transparent;

        border-bottom: 50px solid #000;
    }

    .demo-arrow-down{
        width: 0; 
        height: 0; 

        border-left: 50px solid transparent;
        border-right: 50px solid transparent;

        border-top: 50px solid #333;
    }

    .demo-arrow-right{
        width: 0; 
        height: 0; 

        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;

        border-left: 50px solid #ff0;
    }

    .demo-arrow-left{
        width: 0; 
        height: 0; 

        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent; 

        border-right:50px solid #f0f; 
    }

    /* Kelompok 2 */

    .demo-topleft{
        width: 0; 
        height: 0; 

        border-top: 50px solid #333; 
        border-right: 50px solid transparent;
    }

    .demo-topright{
        width: 0; 
        height: 0; 

        border-top: 50px solid #333; 
        border-left: 50px solid transparent;
    }
    .demo-bottomleft{
        width: 0; 
        height: 0; 

        border-bottom: 50px solid #333; 
        border-right: 50px solid transparent;
    }
    .demo-bottomright{
        width: 0; 
        height: 0; 

        border-bottom: 50px solid #333; 
        border-left: 50px solid transparent;
    }

Bisa dilihat disitu, untuk membuatnya kita hanya perlu bermain dengan border, border itu ada border-top, border-right, border-bottom, border-left. Jika semuanya kita pakai maka yang akan terbentuk adalah persegi, oleh karena ini diperlukan background yang transparent untuk menghilangkan bagian-bagianya tertentu agar persegi tadi menjadi bentuk segitiga.

Bagian lain yang perlu dilihat dari CSS itu adalah setiap bentuk menggunakan width:0 dan height:0 , jadi disitu kita hanya memanfaatkan lebar dari border

Hasil / Demo
Maka hasil yang akan didapat adalah seperti berikut ini.

Kelompok 1

Kelompok 2

Jika kamu tertarik mencobanya, bisa copy script diatas atau download kode nya di sini.

Sekian
Salam Web Design Indonesia

Making the height 100% according to the monitor’s height with css is sometimes an obstacle for some web designers, but actually the trick is very easy, they just don’t understand the trick. Or it could be that it doesn’t care about all the tags in the html.

Auto Height 100% Fullscreen CSS
Auto Height 100% Fullscreen CSS

There was a question on the forum asking that he made a very good design, it fits the monitor height on the screen 1366px x 768px, it looks very good, but because the website will be opened on a screen with a resolution of 3840px x 2160px so the height is not suitable and the website so messy, leaving space at the bottom, even though the width is appropriate because it uses fluid or uses percent (100%).

So why the height is not appropriate?
Because it is made at a resolution of 1366px x 768px it won’t fit on a bigger screen or it won’t be as good if it’s opened on a smaller screen.

The habit of web designers is not to think too much about the height of the html and body tags, even though therein lies the mistake. They only focus on the height of the tags (elements) that are in the body, such as headers and content for example, so take a look at the following structure.

Auto Height

header

Lorem ipsum dolor sit amet, elite adipisicing consectetur. Perferendis, incidunt qui dolorem excepturi natus modi debitis voluptas nesciunt magnam adipisci possimus inventore doloribus amet quia voluptatum quas exercitationem obcaecati neque.

Lorem ipsum dolor sit amet, elite adipisicing consectetur. Placeat, laboriosam, officiis consectetur deserunt ipsam blanditiis laborum tempore ut esse exercitationem molestiae reprehenderit. Inventore, cupiditate similique vero culpa est neque fuga.

If we pay attention there, if we want to create a fullscreen website using percent (%), we have to remember that all tags have a height: auto property by default.
So if you want to make .header, and .main fullscreen then we have to make html and body to 100% first, then we set the tags inside the body as desired.

WRONG CSS: Usually many people use css as below so the results are not as expected, even though the height in .header and .main is 10% and 90%, it doesn’t work because html and body still have auto values ​​by default, not 100%.

*{
padding: 0;margins: 0;
}
.headers{
height: 10%;
background: red;
}

.main{
height: 90%;
background:yellow;
}
.main-content{
padding: 20px;
}
CORRECT CSS: So the css that should be used is something like this, where the html and body are given height:100%;

*{
padding: 0;margins: 0;
}
html, body{
height: 100%;
}
.headers{
height: 10%;
background: red;
}

.main{
height: 90%;
background:yellow;
}
.main-content{
padding: 20px;
}
There you can see that the html and body are made with a height of 100% (height: 100%)
then we can freely determine the height for the elements in the body tag. It can be seen there for example .header is made with a height of 10% and .main with a height of 90%.

Then the results that we will be able to see in the following demo, can be compared the results.

DEMO Wrong | True Demo

What if the content is too long & has a footer
Demo 1, Demo 2, Demo3
Demo 1, Demo 2, Demo3

If the content in CLASS .main is too long and we want it to have a footer then we first adjust the height of the .header, .main, and .footer.

Example:

.headers: 10%;
.main: 85%
.footer: 5%

TOTAL = 100%

and for content that is too long, we need to provide overflow-y: scroll on the .main class so that the contents of the .main CLASS will display a vertical scroll and the content does not exceed / pass the footer.

HTML Example

Auto Height

header

Lorem ipsum dolor sit amet, elite adipisicing consectetur. Perferendis, incidunt qui dolorem excepturi … … … …

Footer

CSS

*{
padding: 0;margins: 0;
}
html, body{
height: 100%;
}
.headers{
height: 10%;
background: red;
}

.main{
height: 85%;
background:yellow;
overflow-y: scroll;
}
.main-content{
padding: 20px;
}
.footer{
height: 5%;
background: orange;
}
Various ways
There are actually many other ways, it could be with javascript, maybe also with css display tables, but this is just one example.