Category CSS3

Hello web designers, this time tutorial-webdesign.com will discuss the box-sizing feature which is one of the built-in features of css3. Hopefully there are lessons to be learned from this article about box-sizing.

CSS3 Box Sizing

This feature is quite useful because it eliminates the headache that usually arises when we are making web layouts. Where we usually determine the width of the layout that we want first, after that determine the width of the sidebar and web content.

For example, the width of the layout is 800px. We divide it into 2 columns, left and right, left 200px and right 600px. Once created, it turns out that 800px width is not enough because we need padding and borders. Arg….. Forced to have to recalculate by considering how much padding and how many borders.

Box dimensions
Box dimensions

Wow, what a hassle, so what if we want to make the width or height of an html element such as a div have the width and height that we want? The solution can be to use the Box-Sizing feature in css3.

We’d better take a look at an example of using box-sizing

DEMO DOWNLOAD

Just add the box-sizing code: border-box; to create elements that are as wide as we want. To be able to run in various browsers use the prefix of each browser.

With the current development of CSS3, making websites more sophisticated, and looking smarter, of course this is good news for web designers.

This time we will discuss a little about CSS3 Filters.

What are CSS3 Filters?
Filters bring effects to the dom, with filters we can create effects that we usually do with Adobe Photoshop or other image management software into our html documents, such as images or forms.

Browser Support
Unfortunately, currently only Chrome supports this facility, so the results cannot be seen when using Firefox.

How to use
In this article we will try some CSS Filter effects that we can use to give an effect to an image.

HTML
First, create an HTML structure like the following:

CSS
For css, please copy the script snippet below.

Blur
Blur
Blur

.filter img{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
-o-filter: blur(5px);
filter: blur(5px);
}
Grayscale
Grayscale
Grayscale

.filter img{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filters: grayscale(100%);
}
Sepia

As we all know that HTML5 is the future of the web. This infographic will provide an overview for you or us who are beginners 🙂 about how HTML will change the performance of the existing website to be more powerful. Thank you for productivedreams for sharing, very useful.

Some of the strengths of HTML collaboration are better with Javascript, HTML5 With CSS3, HTML Geolocation, Drag & Drop, Web Font API, HTML5 against SEO, Multimedia, Form Validation, Ofline Storage, Canvas, Audio & Video, etc.

All will be discussed briefly. Checkidot 🙂

Don’t forget to follow us on Twitter at @tut_web for info on getting the latest news updates about web design and development

css3
css3

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

CSS3 Drop Shadow Generator
css3 drop shadow generator
css3 drop shadow generator

Ultimate CSS Gradient Generator
ultimate css gradient generator
ultimate css gradient generator

CSS3 Button Generator
css3 button generator
css3 button generator

CSS3 Button Generator

Trends in the world of web design are always changing, now there are trends in frameworks, responsive web, and more. If we remember some time ago almost all website layouts are made with tables. Now almost all of them have tables, or do not use tables to form the layout. But tables are of course still very useful in many situations, but not for web view frameworks.

In writing on the last day of 2012, Tutorial-webdesign.com will discuss some of our own version of web design trends during 2012.

1. Responsive Web Design
   The year 2012 is arguably the year of Responsive Web Design, Responsive web design is a website display design that can adjust the screen size of the device when the website is opened. So the website can be opened with Mobile, Tablet PC, Desktop, Widescreen TV, etc. without making it difficult for visitors to enjoy the existing content.

responsive-web-design

This can be proven by the number of websites that have changed their design from previously unresponsive to responsive, including Microsoft.com, Mashable.com, etc.

And there are many tools that can be used to make it easier to create responsive web designs, such as Frameworks, Plugins, and others.

2. CSS3 and HTML5
   html5-css3

It is undeniable, CSS3 and HTML5 were discussed a lot during 2012, many websites are starting to use the advanced features of HTML5. Dipenghunjung 2012 W3C has also stated that HTML5 features are complete. The many CSS3 Generator and HTML5 Starter templates are also increasingly making people interested in using these 2 technologies.

3. Framework & Grid System
   HTML & CSS Framework is also a byword during 2012

Zurb Foundation, Twitter Bootstrap, Skeleton could be some that many designers are starting to like.

Previous frameworks such as the 960 Grid System are also still widely used.

twitter-bootstrap

4. Single Page, Parallax & Fixed Navigation
   Websites consisting of only 1 page (Single Page) were widely used during 2012:

Usually this single page is combined with interesting effects from Jquery Scroll or Parallax such as (Scrollolama)

This type of web design usually also implements Fixed Navigation (Menu whose position does not change place). For example, the menu on the Twitter and Facebook websites.

parallax-effect-jquery

5. Infinite scroll
   We’ve always been familiar with the term paging, or website page numbering with numbers and links for the Next Page or Previous page, such as Google. However, during 2012 many designers did not use Paging/Pagination, but preferred Infinite Scroll, where the website will load other content if we scroll. As if it’s endless, usually Social Media websites and news websites use this method, because of their large content. You can prove it on the Facebook, Twitter, Pinterest, Mashable websites.

infinite-scroll

6. Custom Font Faces
   Some time ago we used to use Arial, Verdana or just standard fonts to apply on our website. But now we can say that we can use all fonts, the website becomes more attractive, it doesn’t need to be designed in photoshop, we can use the font we want just by including the font with its CSS3 Font-face feature, or we can simply embed it from Google web fonts, Adobe Edge, or Typekit.

font-face

7. Ribbon and Circle
   There seem to be a lot of Web Designers using the Ribbon on their websites during 2012.

ribbon

In addition, the Circle shape is no less trendy.

CircleNavigationEffect

This could be due to the CSS3 feature which has also made it possible to create web element forms like that.

8. Big Image / Background
   We know that images are the elements that can most attract the attention of website visitors, the use of super large images is widely used by web designers in 2012.

big-image

9. Minimalist & Simple
   Minimalist designs are still popular this year, although many people think that minimalist designs are made lazily, and there is no art, but in the web world, minimalist designs are widely used because of many considerations too, Bandwidth, Acceptable Almost all ages, and easy to match colors.

minimalist

10. Infographics
    The last thing we have observed that it is widely used this year is the use of infographics instead of web pages, the use of infographics has become a trend because many people think that visualizing images and interesting writing can make people understand more about the intent of the content presented.

infographic

Metro Style
In this year j

HTML5 and CSS3 are not new, it’s been a few years since we heard the two words. However, it seems that in 2013 HTML5 and CSS3 will be increasingly used. It’s also because the W3C has declared that HTML5 features are complete.

HTML5 and CSS3
HTML5 and CSS3

HTML5 and CSS3 are the future of websites, in the future HTML5 and CSS3 will be more widely used. So there’s no harm in us starting to study it from now on. Many people have used HMTL5 but that doesn’t mean we’re too late to learn it from now on.

This post will not explain at length, but we just want to urge friends in Indonesia to start and don’t hesitate to use HTML5 and CSS3 on the website you create. Because the browser already supports, the resources and tutorials are numerous.

For those of you who want to know more about HTML5 and CSS3, maybe the following site can increase your knowledge about HTML5 and CSS3.

Visit -> HTML FIVE WOW

Tutorial-Webdesign.com will also try as much as possible to write some interesting things about HTML5 and CSS3

We also invite you all to write what you learn on this site, share it with others, from community to community.

Some sites that might be able to further increase your knowledge about HTML5 and CSS3

We will show a Free / Free Responsive Template in this article, hopefully it will be useful to speed up the work of friends.

Responsive web design is currently being talked about a lot by web designers and web developers around the world. Several large-scale websites have also started migrating their websites to be responsive, so that they can be opened on almost all devices, especially mobile phones. tablet computers and personal computers.

Many designers deliberately create HTML and CSS templates to be used by others for free to help speed up website creation, here we show some free templates that can be used to create websites or to learn from what other programmers have made.

In this paper we will only experiment with css by disabling a link, there are cases where sometimes in a condition we have to disable/disable a link, for example in an administrator page, when the admin is logged in people can edit an article (active link), but when the login is an operator, the link for editing should be deactivated, but not removed so that the difference can be seen.

disable-link-css

Usually we use javascript to turn off the link (but if the browser’s javascript is disabled then this is useless) or conditioned in the program code so that the link is not printed. But that way the link still looks active and can be clicked.

This time we will try to make links not clickable, even if javascript is turned off.

We only need a class and then it is set in css so that the link cannot be clicked, or seems to be inactive.

Create the HTML structure as follows.

It can be seen on the 2nd link that goes to flickr given the class .disabled

styling
And for the css as follows

Preventing people from selecting the text on the website is sometimes very necessary, especially in this era of the Internet, there are so many people who carelessly take and quote or copy/paste other people’s writings without permission.
For this reason, prevention is needed, if people used to do prevention by using Javascript, or by image raplacement (ie by converting text into image format), or other ways.

Disable Text
Image by ThrasherDave

Proverb:

An ounce of prevention is worth a pound of cure

In this article, Tutorial-webdesign.com will try to prevent or at least make it difficult for others to select the text on our website with CSS. Previously we discussed about disabling a link with css, now we will disable the selection function of the content/text on the website.

The following is an example of using HTML and CSS tags to prevent selection of web page text.
HTML

Lorem ipsum dolor sit amet, elite adipisicing consectetur. Ullam perspiciatis dolorum! Quis dignissimos voluptatem illum facilis suscipit repellat non voluptates hic laboriosam nesciunt rem voluptatum provident obcaecati ea eum reiciendis nisi explicabo.

CSS

.website-content{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

User-select: none, will prevent others from selecting the text.
To prevent others from selecting the entire text, use the above css script in the body tag.
To prevent other people from selecting certain elements, use the css script above in the tag you want to disable.
Demo
All Text Demo
Partial Demo
Downloads 1
Download 2

Browser Support
Not Support IE9 and below and All Opera.

Okay, so these short tips this time, may be useful for those of you who are afraid of the article being stolen by others.

Making color images black and white with CSS3 is our discussion this time.

In the past we had to use Photoshop to give a photo grayscale (black and white) effect to an image, but now with the sophistication of css3 features we don’t need to be tired of editing it in Photoshop, just with a few lines of css code we can make color photos black and white.

Grayscale NoCar
Image by : comzeraddt

A few months ago tutorial-webdesign.com also discussed in the article Creating Instagram Effects with CSS3 filters, but until now it doesn’t support Firefox, but this time we will try to make a grayscale effect that can be run in Firefox.

Okay, let’s just practice making.

Prepare a file with the name grayscale.html with the following structure

For the css code like this