Tag

css

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…

About WordPress

WordPress is the world’s most popular content management system. Originally it was designed for creating blogs however more and more people started using it as a system for building websites. The advantage of using WordPress is that it is super simple to create new content and maintain your website. It is also very easy to add new functionality to your website by choosing from thousands of plugins and installing them on your WordPress system.

Non-exclusive website designs

To define and adapt the layout and design of your website WordPress comes with the ability to install themes. Themes contain several files that specify what your website looks like. You can either download an existing theme (by choosing one of the thousands of free or charged themes out there) or create your own theme. Most of the themes that you can download from websites like ThemeForest or the WordPress theme directory can somehow be adapted from the WordPress admin area. You will probably be able to change colors, upload a logo or do some predefined page layout changes (like changing from a full-width website to a boxed website). However if you want to do some furthergoing changes to the website design or if you are creating your own theme you will have to add your own CSS and HTML code. While this might be useful if you wish to create a very unique design and have a clear picture in your head of what you want to build you will certainly need to have some coding knowledge. If you don’t have coding knowledge you will probably end up leaving the themes as they are or investing money and hiring a web developer to adapt the design according to your needs. Since many small businesses or private persons simply don’t have the money to hire a developer they are often forced to leave the themes as they are. But because themes are free of charge or available at very low cost they are mostly non-exclusive. Non-exclusive means that apart from you many other website owners might use the same theme and therefore have a similar looking website.

A unique and fresh web layout not only helps entice visitors, but also create a distinct web design. And CSS allows one to create a desirable website theme and enhance the look and feel of a website. By writing in CSS file, you can efficiently deliver a polished and refined design up to the web standards. This is why, if one wants to improve the aesthetics of his site, he has to tweak his theme’s stylesheet as per the requirements. If you are running a WordPress-powered website, you can edit your theme’s CSS and overhaul the layout as required.

Despite, WordPress is a quite popular for developing surefire web solutions, several people still commit some common mistakes while writing CSS for customizing the WP themes. Even professional have been found making common goofs. The browsers don’t understand these errors and simply, respond by generating a tattered appearance. Since, these mistakes can lead to a broken WP site, it is essential to avoid them while handling the CSS of a theme.

This very simple jQuery Accordion Snippet will help you save space and divide your content into different logical sections. No fancy setting parameters, no need for a function call, simply add the JS file to your head and enjoy a minimal, cross-browser working Accordion. Preview Simple Lingulo-Accordion What you need to do Include the minified or the original JS file Add the CSS rules to your CSS file Add your HTML code create an element…

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…

In the vastness of the internet you can find a lot of useful online tools which can help you save tremendous development time.

1. Ceaser

Ceaser is a CSS Easing Animation Tool which can be used to create custom timing functions. For further informations about transitions and timing functions please read my blog post.

Ceaser - CSS Easing Animation Tool

In den Weiten des Internets gibt es eine ganze Menge nützlicher Online-Tools zu entdecken, die Dir die Arbeit erleichtern und Dir helfen können enorm viel Zeit einzusparen.

1. Ceaser

Ceaser ist ein CSS-Easing Tool, mit dem Du Deine eigenen Zeitfunktionen für CSS Transitions erstellen kannst. Für weitere Informationen rund um Transitions und Zeitfunktionen, lies bitte meinen Blog-Beitrag.

Ceaser - CSS Easing Animation Tool

When creating a website there are a lot of things you need to pay attention to. The code needs to be tidy and the website should look similar no matter what browser a visitor is using. If possible it should be responsive and react to the user’s device and screen resolution. When using new features like HTML5 and CSS3 you have to make sure all the features are supported in all browsers.

Fortunately there are a lot of very useful scripts out there which simplify your life when creating new web pages. The following list gives you an overview over some of the most important scripts and should help you create clean beautiful and cross-browser compatible websites.Wenn Du eine Webseite erstellt, gibt es eine Menge, worauf Du achten musst. Der Code sollte sauber programmiert und aufgeräumt sein und die Webseite sollte immer gleich aussehen – unabhängig davon, welchen Browser ein Besucher benutzt. Wenn möglich sollte die Seite responsive sein und sich an das Benutzergerät und die Bildschirmauflösung anpassen. Wenn neue Features wie CSS3 oder HTML5 genutzt werden, sollte darauf geachtet werden, dass diese Features nicht von allen Browsern unterstützt werden und daher Alternativlösungen gefunden werden müssen.

Glücklicherweise gibt es viele nützliche Skripts, die das Programmieren von Webseiten vereinfachen können. Die folgende Liste soll einen Überblick über einige der wichtigsten Skripts geben und Dir helfen, schöne, saubere und browserunabhängige Webseiten zu erstellen.

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…