Tag

css3

Browsing

Required knowledge level: expert Walruses are my favorite animals, I just like how calm and friendly they are and it’s a shame that they are threatened with extinction due to water pollution and climate changes. One day when I had some free time I came up with the idea to build a cartoon-styled walrus using only HTML and CSS. I have never created a CSS animal before but since I kept on seeing pure CSS animals on…

Kube Tutorial by Lingulo

Preview

HTML5 responsive website

Download

Download it from GitHub


Please note! Due to the use of CSS flexbox this website only works in the latest browser versions. Be sure to know that before using Kube for a production website.

In this quick Kube tutorial we will be creating a very simple yet modern and elegant personal portfolio website using Kube. Kube is a small CSS framework using the latest CSS techniques. The grid system is not using any floats but instead the new CSS flexbox which is already supported in current versions of all mayor browsers. In the future using flexbox will be the default way to create layouts in CSS and Kube is already starting now. Kube doesn’t include any JavaScript functionality like sliders, accordions etc. which might be missing features at first sight. But that is actually the strength of Kube because it is kept small and very basic without any fancy designs or features which would bloat the whole framework with stuff we don’t even need.

As the first quarter of 2015 is ending, we’ve come to see many predictions being made for the web design industry. Without wasting any time, let’s discuss about some of the major web trends that are expected to evolve and will be ruling the web industry in 2015:

1. Storytelling Will Become More Animated

You may have stumbled upon several websites that tell a story. Though storytelling isn’t new and has been around us for ages, but it’s only recently that it made its way into the design industry, by making use of animations and other interactive elements.

And this year, you can expect to see story designs becoming even better by the use of animation sequences that starts when a user scroll down the page. In essence, more and more websites telling stories will be using 3D graphics and HD quality videos, in a bid to increase the level of visual appeal and user’s interactivity.

With the help of CSS3 Transitions it is possible to create beautiful custom CSS3 select boxes automatically. The script you can download here will automatically convert all select boxes which are inside a div with the class lingulo-select into custom select boxes. PreviewCustom Select BoxesDownloadSelect Boxes as Zip File9kBTimes downloaded In order to convert your select boxes into Lingulo Custom Select Boxes you need to include the minified script as well as the style.css file.…

Each and every day I browse through the internet to find new useful scripts or CSS files which might make our lives easier when creating websites. The amount of different scripts and plugins out there is just tremendous and it becomes more and more difficult and confusing to actually know which ones to use in your project. In this blog post I will give you an overview over the most important and useful plugins and scripts (the list will be extended by time). In a second step I will then try to show you an example setup of plugins and scripts that you can use in your web project.

In this second part of my tutorial we will be building the CSS and JavaScript code and do the necessary steps for responsive webdesign to create this beautiful HTML5 responsive website. Be sure to have worked through the first part of the tutorial where we have built the basic HTML structure and included all necessary scripts. We have already included our CSS Reset in the last part of the tutorial. The Reset will take care…

Required knowledge level: intermediate In this responsive web design tutorial we will create an awesome responsive HTML5 website starting from scratch. I tried to include as many different features as possible, so we will be dealing with a jQuery slider, CSS3 transitions and animations, CSS Media Queries and so on. This part of the tutorial will show you the HTML structure and the required scripts in a step by step tutorial. The second part will…

Benötigte Kenntnisse: mittel In diesem Tutorial werden wir Schritt für Schritt eine hübsche moderne responsive HTML5-Webseite erstellen. Ich habe versucht so viele Features wie möglich in das Tutorial zu integrieren. Wir werden uns mit einem jQuery Slider, CSS3-Transitions und CSS3-Animationen, CSS Media-Queries und noch einigem mehr beschäftigen. Der erste Teil des Tutorials wird Dir zeigen wie man die grundlegende HTML-Struktur aufbaut und welche Skripts für eine browserunabhängige Darstellung der Webseite benötigt werden. Im zweiten Teil…

How to use transitions CSS3 offers a lot of useful new features, one of these features are transitions. Transitions can be used to easily animate effects when changing from one style to another. Look at the navigation on top of this page. It is not very noticeable but if you look closely you will see that the link does not change its color immediately on mouseover. Instead it nicely blends from one color to the…