Position Elements in Center With CSS | Vertical & Horizontal

In this tutorial we will position an element in the middle of the screen with css.

Placing an element so that its position is centered horizontally is not difficult, we just need to make the text-align center, but vertically we need some tricks to do it.
Center With CSS
There are many tricks that can be used to make an element in the middle, but this time we will only try at least 2 ways to make an element right in the middle.

We start creating a div with the class container, and inside it there is another class with the name box.

The HTML structure is as follows.

Goooogle

Center div.container
First we will make the container class so that it is in the middle by adding CSS as follows

.container{
width:400px;
height:200px;
padding:20px;
background:yellow;
position: fixed;
top: 50%;
left: 50%;
margin-top: -120px;
margin-left: -220px;
}
The container class is now in the middle of the screen, it should be noted there that the value of top and left is 50%. But with settings like that, the middle position is the top left corner of the box, to adjust it we need to change the margin-top and margin-left, both of which are obtained by the following calculation.

Margin-top = height / 2 + padding

Margin-left = width / 2 + padding

However, the value must be minus (-) so that the position shifts up and to the left.

Demo 1

Center div.box
To make the box class in the middle, we will try another way, namely by adding display: table in the container class, then display: table-cell in the box class.
We add the CSS code like this.

.container{
display: table;
}
.box{
display: table-cell;
text-align: center;
vertical-align: middle;

background:orange;
border:50px solid rgba(0,0,0,.2);
}
Demo 2

Results
To complete this demo to be more complete, we add a border.
Here is the complete css code

Creating Menu Slides With CSS and Jquery

Menu that when Mouse Hover will change like a slide, made with CSS and Jquery.

This time we will try to make an example menu that can be applied to your website, this menu is quite interesting because it looks a bit animated with the slides.
Menu Slides
Ok, let’s start right away

Ingredients
Electrolize Fonts from Google Web Fonts
jquery
Subtlepattern Egg-Shell
HTML Menu Structure
<div class=”mn-container”>

<ul id=”topnav”>
<li><a href=””>Home</a></li>
<li><a href=””>Services</a></li>
<li><a href=””>Portfolio</a></li>
<li><a href=””>Blog</a></li>
<li><a href=””>About</a></li>
<li><a href=””>Contact</a></li>
</ul>
</div>
There we create a container for the menu, and an unordered list for the menu list.

Code for menu chart
.mn-container{
margin:50px auto;
width:680px;
padding:20px;
background:rgba(255,255,0,.1);
overflow:hidden;
border:1px solid rgba(225,225,225,.9)
}
Here is the code for the List Menu

ul#topnav {

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 the CSS :before and :first-child pseudo-elements.

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

HTML
<!DOC

Creating slide controls with Jquery


In this tutorial we will try to create a Slide Control with Jquery, what is a slide control? Basically we will control the content of an input text just by dragging the controller.

Jquery Slide Control
Jquery Slide Control

This is great if you want to use it to beautify the form when there is a field to fill in for example weight, or height, or if on an e-commerce website it can be used to beautify the number of items you want to buy, or if you are creating a music website. , now this can be used to adjust the volume etc. Yes, that’s how it’s used.

Ok let’s start

First prepare a js folder, containing the following files:

jquery.js
jquery.slideControl.min.js
The Jquery Slide Control plugin can be found here.
Next, prepare a css folder containing the following files:

slideControl.css
style.css
Okay now create a file called index.html, placed outside the js folder, and css

The contents are roughly as follows

  • Responsiveness:
  • Safety:
  • Information:

While the contents of the css/style.css file are as follows:

Install Sass on Windows

Hi developers, this time we will try to install Ruby on windows and try using Sass.

If you are someone who always deals with CSS, we recommend you to try Sass, because with Sass writing CSS code becomes more interesting and fun. As it is written on the official website of Sass

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

The main thing to do to get started using SASS is to install Ruby, because SASS runs on top of Ruby.

For use on windows we can use the Ruby Installer for windows.

  1. Download Ruby Installer (latest version 1.9.3-p327)
  2. Install the downloaded Ruby

Install Ruby Until it’s finished
Install Ruby Until it’s finished

  1. After Ruby is installed, go to Command Prompt Ruby ( Start -> All Programs -> Ruby 1.9.3-p327 -> Start Command Prompt With Ruby )

Open Command Prompt Ruby
Open Command Prompt Ruby

  1. Install Sass with the command

gem install sass

Install SASS
Install SASS

  1. Installation process is complete

Start Working With Sass
After the installation process is complete, it means that now we can start making css using Sass.

  1. Create a folder in htdocs (example: mysass)
  2. Create an HTML File (index.html) with the following structure in body and /body

Sass

Have fun playing with ruby

while the head and /head sections don’t forget to include the css file compiled from sass

[html] [/html]

  1. Create a sass file with the name style.scss the contents are as follows
  • Remember the extension is .SCSS

$back-color: #333;
$text-color: #f8f8f8;
$box-margin: 30px;
$box-width: 500px;

.test{
background: $back-color;
color: $text-color;
margin: $box-margin auto;
padding: $box-margin / 2;
width: $box-width;
}
There we can see, CSS can now use variables, division and subtraction.

Interesting right?

For further use of .SCSS or .SASS syntax, please read the sass website.

  1. Reopen Command Prompt, go to mysass folder

Here my mysass folder is in E:XAMPPhtdocsmysass

  1. Compile the .SCSS file to become a .CSS file with the following command

sass –watch style.scss:style.css

A CSS file will be created with the name style.css, please run http://localhost/mysass to see the results.

Easily create CSS3 Effects With CSS3 Generator

For those of you website developers, especially web designers, you must often come into contact with CSS, especially for now CSS3.

Many CSS3 syntax does not work well in some browsers if we forget to write the syntax correctly. For that, some people make websites that can generate (automatically) create CSS3 code that is ready for you to use, just need to copy and paste.

Here are some lists of CSS3 Generators that are often used, we can learn a lot about CSS3 syntax here, about browser compatibility can also be known from these websites:

CSS3 Generator

Creating Dropdown Menus With Jquery and CSS

Creating a dropdown menu with css, the menu is the most important thing in a website, a good menu will make it easier for visitors to explore our website, especially when our website turns out to have a page consisting of sub and sub sub pages.

In this tutorial we will try to create a Dropdown menu with CSS, and we will beautify the menu we created with a little help from Jquery.

In previous articles, we have also made sample menus several times, maybe they can be used as other references.

Tips for Creating Horizontal Menus With CSS
Creating Menu Slides With CSS and Jquery
OK, let’s get started.

HTML Structure
Here we need to prepare the HTML structure first, create a file with the name index.html, then write the following code.

Demo Dropdown Menu: Tutorial-Webdesign.com

Actually this menu still works well without Javascript/Jquery, but to make the effect appear slowly we use Jquery.

Effects like that can actually be made with CSS3 Animation, come on, please show your creations!!

styling
To beautify the appearance, write the following css, in the style.css file

jquery
Actually until here the menu appears OK.
To smooth the appearance of the sub menu, we can make it with Javascript / Jquery as below.
We can also replace it with CSS3 Animation if desired.

Code for twd-menu.js.

function mainmenu(){
$(” #nav ul “).css({display: “none”}); // Opera Fix
$(” #nav li”).hover(function(){
$(this).find(‘ul:first’).css({visibility: “visible”,display: “none”}).show(400);
},function(){
$(this).find(‘ul:first’).css({visibility: “hidden”});
});
}

$(document).ready(function(){
mainmenu();
});
Results

Here are the results of the menu that we made, you can change it according to your needs, we have suggestions and input. You can write your comments, or write articles on this blog, by registering first.

Beautify Your Website with Adobe Edge Fonts

Fonts are very important in a website, fonts can make a website look attractive or not, it depends on how we place and use fonts correctly on the website that we create.

You must have often heard the term Typography, yep, it is related to the use of fonts. This time we discuss a little about Typography on the website.

For web design, nowadays many people use Font-face in CSS to determine what font to use on their website.

Many people also use the Google Web Fonts service to embed fonts into their websites.

But now there is a service that is relatively newer and quite promising from Adobe, the name is Adobe Edge.

There are about 500 fonts provided by Adobe Edge at this time, and their use is easy, we just insert a javascript tag that points to the javascript file on the adobe edge website, with this script we can use the fonts in Adobe Edge on our website .

You can read the description of its use on this website

Here’s an example of its use.

Insert the following script between head and /head

So now we can use the “strumpf-std” font in every element we want on our website pages with the help of CSS, an example is as follows. We use in the h1 tag,

h1 {
font-family: strumpf-std, serif;
}
Here’s a demo we’ve made
Create an html file, here I use adobe-edge.html
Insert Javascript in the head and /head tags

Then create an HTML structure like this: Adobe Edge Demo Font : tutorial-webdesign.com

Web Design Tutorial

Web Design & Web Development Indonesia

Then we beautify it with CSS, in this example we put CSS between the head tags, you can also put it in a separate css file.

Learn CSS Layout | Guide

Learning to make website layouts with css is not difficult, but for some people who are just starting out it looks complicated, because they have to deal with lots of HTML and CSS syntaxes, there are lots of HTML and CSS syntaxes that must be memorized to become a web designer. reliable.

There are many ways to learn a field of science, here in particular tutorial-webdesign.com chooses web design and the topic we take is Creating web layouts with CSS, why? because it’s not the time to make a website with the tables and the tables in color, in the table there will be another sub table, ouch JADUL.

For those of you who are just starting out, you can start learning from here

START
If you feel you understand enough, and have seen the examples on the website, but still feel they are lacking, you can learn by looking at the layout examples, and at the same time seeing the source code.

There are many examples here, and you can also understand the names of the various forms of web layouts.

VIEW SAMPLE
Still feel it’s not enough, you want to easily choose the size of the layout you want to learn and want to download it all at once, you may need this website.

VIEW, CHOOSE SIZE & DOWNLOAD
If you are a lazy person, maybe what you really need is a CSS Layout Generator, maybe the following website is what you really need.

CSS LAYOUT GENERATOR
Still can’t? Maybe what you need is a ready-made, ready-to-use template, CSS Templates may be the most appropriate for you, there’s nothing wrong with using someone else’s template, the most important thing is the success of the website after it’s finished. We certainly don’t recommend that kind of thinking, right, but if you still want to do that, please visit Millions of places to find this template

USE CSS TEMPLATES
You feel you have mastered all CSS syntax through the website above, maybe you should understand more about CSS Layout, CSS3 is currently being studied by many people.

LEARN CSS3 LAYOUT

If you want to maximize your skills, CSS3 GRID is worth learning too.

LEARN CSS3 GRID LAYOUT

That’s it for this article, hopefully it will be useful for you

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