Make a full background website

Currently, website design techniques are very diverse, one of the favorites of designers is to make an image into a full one-page background. A full background image will create an elegant effect on the website, of course it must be supported by a good selection of images, the type and color of the font used is also decisive.

How to make a full background website page, it’s not too difficult, in this article Waka Design will provide a useful code snippet to make an image a full background.

We’re going to make use of a css function called Background-size.

The essence of creating a full background website is to use code snippets like this, which can be applied to the html or body tags.

html{
background: url(img/bromo.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Start by selecting an image
Okay let’s start by choosing the right image, in this article we are using an image from Daniele Parisi

Mount Bromo
Mount Bromo

Creating HTML Structure
In this article we will use 2 fonts that we will embed from Google Web Fonts, namely

By Script and Open Sand

The structural design that we will make consists of:
header, to place the website title.
content, to write the contents of the website.
footer, to write down the copyright and source.

here is the full code

Shadow or Shadow with CSS3

Friends of Wakaka Design, this time we will discuss about CSS Shadow, if you remember a few years ago, when you want to create a shadow effect on a website, then we have to make it in Photoshop using the Drop Shadow Effect, then we crop/slicing as needed. Wow, trouble huh? what’s more, the result is in the form of an image file, which can burden the website, can increase the burden on the website because it has to load the image first for a shadow.

Now those days are said to be over, though not completely over.
Shadow on the website we can create by adding a few lines of CSS3 only.

The working principle of CSS Shadow is as follows:
box-shadow: none | <shadow> [ , <shadow> ]*

<shadow> = insert? && [ <length>{2,4} && <color>? ]
We can see that the shadows are separated by commas (,) and each comma is used to give a vertical or horizontal shadow. and width thickness/BLUR.

Examples like the following:

This is an example of Shadow in CSS
The syntax is something like this:

Animation with CSS

A few years ago, if you wanted to create a simple animation on a website, such as an object moving from left to right, then you had to create it using Flash, which was frame-by-frame. It’s a bit tricky.

But now everything is simpler, we can create animations with CSS3.

How to make it? In this article, Wakaka gives an example of a simple animation that we can make using CSS, of course, this is just the basics, you can make something even better than this later. Remember this is just basic for beginners.

Creating HTML Structure



CSS Code
This CSS is placed between the . tags

There we determine, if the mouse is above the yellow box, there will be a transition, the duration of which is width: 2 seconds, height 2 seconds, -moz-transform 2 seconds, and -moz-border-radius 1 second.

Limiting Text Input with Jquery | like Twitter


Jquery limit input
Some time ago I was asked to make a web application for the purpose of a story writing competition, the story can only be 700 characters long.

How to keep the data stored in the database no longer than 700 characters?

Also, how do you let the user know how many characters they have written (part of the user experience)?

There are 2 ways that can be used.

Restricting with PHP (Server site)
Restricting with Javascript/Jquery (Client site)
This time will be discussed with Javascript, especially using Jquery.

What will it be like?
What we make may be similar to twitter, where twitter limits users by only allowing to write 140 characters for each post status.

Similar to the case of limiting characters to the story.

How to make it?

HTML structure (index.html)

Create Login Form with PHP, Jquery & CSS3

Create an elegant login page using CSS3, Jquery + Ajax and processed with PHP.

I actually use this layout for the administrator login page for a web application project that I’m working on, after the application was finished, I finally thought of sharing it with friends at Wakaka Design. Who knows, it can be useful and help speed up the work of friends who are in need of an administrator login page design for their work.

Login Form Jquery

Draft.

The design concept that will be made is minimalist and still looks modern.

What we need

We need a background with a wood texture, it can be found here.

We also need a font to beautify the page, we include the “Oleo Script” font that we embed from Google Webfonts.

Don’t forget Jquery which can be downloaded from jquery.com

Okay equipment is complete, now we start the code part of the program.

HTML Structure
Head

Body

So logically when we click on the Login button, then the javascript will send an Ajax request to the waka-login.php file to find out whether the user and password entered are correct or not.
If it’s wrong, it displays an error message, if it’s true, a slide will occur, and a redirecting message appears…

  • All that you can change according to your needs later.

CSS Code
After the html structure is complete, it’s time for us to beautify this page with css

PHP
To process the username and password entered by the user, we need PHP, the following php code is used, here we do not check the database, because this is just a concept, the required query can later be placed in the PHP file as well.

<?php

Designing a Gallery page with CSS3

Creating a Profile page or Team work page on a company website is important, that page usually contains photos of team members and their job titles.

In this tutorial we will try to make the page look more attractive. The idea is to make the bios appear when the mouse is over an image and at the same time the other images will be dimmed as well. Like the following picture. We use CSS Transition and help Opacity 😀

Css3 Hover Animation
Css3 Hover Animation

Materials
Rebel Background Pattern from subtlepattern

2 Doppio One and Noticia Text fonts embedded from Google Webfonts

Avatar Photo of Sarah Parmenter

HTML Structure
<ul class=”profiles”>

<li class=”maurice”>
<a href=”#”>
<div class=”bio”>
<div class=”name”>Maurice</div>
<div class=”position”>Co-Founder</div>
<div class=”description”>Vivamus ornare massa in nisl posuere sit amet interdum nisl accumsan. Cras accumsan viverra justo sit amet faucibus.</div>
</div>
</a>
</li>

<li class=”adrian”>
<a href=”#”>
<div class=”bio”>
<div class=”name”>Adrian</div>
<div class=”position”>Manager</div>
<div class=”description”>Fusce ornare quam ut leo aliquam et dignissim urna pulvinar</div>
</div>
</a>
</li>

            &lt;!-- Next Member Thumbnail --&gt;

</ul>
there we can see that there is an unordered list (UL), and each member list is accompanied by a brief bio.

CSS
To beautify the HTML structure and make it more animative we will use a lot of css transitions

We will make the page 660px wide, because we need 3 columns for an image that is 200px * 6 and a margin of 10px * 6

Tips for Creating Horizontal Menus With CSS

Navigation is an important thing to be on the website, this is to make it easier for users to explore the contents of the website, Navigation can be called a menu, some menus are Vertical, and some are Horizontal.

Vertical menu is a menu that is lined down, while Horizontal is sideways.

In the following short tips, we will try the basic techniques of how to create a horizontal menu with CSS.

Horizontal Menu

Here we will also learn about CSS :before and :first-child Pseudo-element.

Okay, let’s start by creating an HTML structure like the following

HTML



After creating the HTML structure, now we can beautify it with CSS

CSS
h1{margin:5px}
.demo-container{margin:50px;}
.horizon-menu{list-style-
left:5px;padding:5px;border-radius:5px;
-webkit-transition:background-color 500ms ease-in-out;
-moz-transition:background-color 500ms ease-in-out;
}
.horizon-menu li a:hover{background-color:orange}
Explanation:
The main point in creating a horizontal menu is in line code 4, where it says display:inline

.horizon-menu li{display:inline;margin:5px 0}
Meanwhile, to create a separator we use li:before{content:’ | ‘}, which will write the character [ | ]

So that the separator does not appear at the beginning we need li:first-child:before{content:’ ‘}

Addition:

To make the menu Responsive to the screen width, which will work well if opened on a smaller screen such as a Smartphone or Tablet PC, then we add the following code:

Designing Awesome FAQ Pages With CSS3

In this web design tutorial, we will try to create an FAQ page using CSS3.

Frequently Asked Questions or abbreviated as FAQ we often encounter on the website, the FAQ usually contains questions that are frequently asked by visitors of a website to the website owner. Instead of being tired of answering the same questions over and over again, a page that contains a collection of frequently asked questions by visitors is created.

FAQ with CSS3

In this tutorial we will create it using CSS3.

There are 2 versions that will be made, only slightly different:

Checkbox Version: Where all the answers can be opened/selected by clicking
Radio Button Version: Where can only open 1 answer.
Here are the results

HTML Structure
Let’s start by creating the HTML markup structure

LEFT FAQs

Beautify Gallery Pages With CSS3

This Tutorial-Webdesign article will try to create a beautiful gallery page with CSS3.

The idea is that we’ll make the image dim when the mouse hovers, while the zoom icon appears, but we’re not going to make it bigger.

If you’re familiar with the Jquery Plugin Lightbox, you’re probably used to seeing this.

Gallery With CSS3

Like cooking, we first prepare the ingredients.

Background Pattern
Photo
Zoom icon
The logic is that we have an anchor tag a, in that tag we insert span and img, roughly if it is described it will look like the following
Visualization
Layer overview

HTML Structure

Creating “Coming Soon” Pages With Jquery, PHP, CSS3 and HTML5

Hello, in this article we will create a “coming soon” page using Jquery, PHP, CSS3 and HTML5.

Coming Soon
Coming Soon Screenshot

Coming soon is a page that usually appears when a website has not been completed, but the domain is already active, this page also serves to gather potential visitors, because usually a good coming soon page is accompanied by a form that allows the user to enter an email address to get information when The website is complete and ready to be visited.

Ingredient
Like cooking, we certainly need ingredients to make it look good:

Free Fonts
Background
HTML5 Structure

Coming Soon

Get Notified About Our Launch

Subscribe

Thank you!

There we use Placeholder to label the field, and required to validate with html5.

CSS Code
It’s time to beautify the HTML that has been created with CSS.

Title Coming Soon