Servage Magazine

Stylesheets are powerful to customize the looks of your website. You probably now that it is the defacto standard for web development layout and design today. However, many developers forget about the advanced possibilites available with CSS. CSS is much more than font-sizees, borders and background-colors. Check out the following snippets for inspiration. They are all related to image-handling on websites. CSS Snippets Image Map Image Preloader Image Replacement for Submit Buttons Tutorial If you are not so familiar with CSS then check out this splending tutorial from W3. CSS is described by Wikipedia as: “Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) ...

Forms are one of the commonly used elements in HTML. It’s a basic functionality for most websites to capture specific information via user input through HTML forms. So why do so many forms look really boring? Why are businesses still missing out on new customers because of unappealing order forms? It’s amazing what you can accomplish with form design. It looks good, gives a serious impression, and attracts users. Examples The images illustrating this article are two examples of beautiful order forms I’ve found online. They are integrated with the rest of the website design, they have a simple layout, there isn’t too much data to be added. Users are ...

This time we show how to create a nice-looking tab-menu, based purely on HTML and CSS. See a live tabmenu example here. First, we want to have the menu code created in HTML. I find that the most appropriate way of doing this, is by creating the menu as a list. Thereby non-supporting browsers will still show the menu as a list, which somewhat resembles a menu. Everyone else will see the cool tab-menu :-) <ul class="tabmenu"> <li><a href="">Overview</a></li> <li class="active"><a href="">About</a></li> <li><a href="">Products</a></li> <li><a href="">Contact</a></li> <li><a href="">Login</a></li> </ul> So far this is somewhat similar to the dropdown menu, except we don’t have sub-items. This tab-menu and the dropdown ...

Everyone who ever tried creating a website probably knows that annoying experience of HTML pages not being displayed the same way in every browser. Especially  older versions of browsers are having a hard time showing your site the way you intended it to look. The reason for this is browsers interpreting HTML code and CSS styles differently. In many cases this has lead developers to create workarounds, including the use of invalid HTML or CSS, to trick the browsers into displaying the content in a similar way. These issues are frequently discussed on the Internet, and a common interpretation of HTML and CSS across all browsers is unfortunately not in sight. However, there is ...

  There is an interesting story about Vilfredo Pareto, an economist who made an observation on the wealth of most of the nations in UN and found that 80% of the wealth of a nation is in the hand of 20% of the people in that country. This became famous as the 80/20 rule in the economic world there after. In our computing world especially in case of web development and web developers who are focusing on performance optimization technique this same rule is working for the code. There are only 20% codes, which are consuming 80% time of the client-server interactions. This is particularly true for http requests. Us web programmers are ...

Transform Values: transform function(s) | none Default: none Applies to: transformable elements (see sidebar) Inherits: no This article focuses on the more straightforward 2-D varieties because they have more practical uses. Transforms are supported on all major browser versions with vendor prefixes. They are not supported at all on IE8 and earlier, Firefox 3 and earlier, and Opera 10.1 and earlier. You can apply a transform to the normal state of an element and it will appear in its transformed state when the page loads. Just be sure that the page is still usable on browsers that don’t support transforms. It is common to pull out the transforms only when users interact with the element via a ...

Stylessheets define the visual appearance of your website. Technically speaking the stylesheets include instructions on sizing, position, color and all other aspects of the DOM elements' display. Nowadays there are frameworks to make the process of defining your stylesheets easier. Usually the work is still done by hand in text editors and sometimes aided by tools, color pickers etc. Also stylesheets have transformed from being mere CSS to the smarter and more intelligent systems SASS and LESS, which allow for a programmatic approach to writing stylesheets. The later two languages allow you to define variables and use them in calculations you can perform in your stylesheet. Also code blocks allow for ...

As it says on the official Super Simple Slider website, there are already many sliders out there. However, there is something special about Super Simple Slider. As the name suggests, it is super simple to set up and it supports all types of content from images to divs and text. It also includes other useful features that we are going to describe in this article. Installation part one: Downloading the required files To add the slider to your website, you should first go to the official www.supersimpleslider.com website and download the files to your project folder. There are three files and one folder you need: An images folder, jQuery, a stylesheet file and ...

Animate.css is a CSS library that allows you to animate elements on a web page. It is very easy to set up and provides dozens of premade animations for you to use, such as bouncing, sliding and fading animations. Another great thing about Animate.css is that it does not use any JavaScript for animations. Everything is done with CSS in a single file. Setting Up Animate.css As promised above, setting up Animate.css is simple. You only need to include one CSS file that you can find on the official website: https://daneden.github.io/animate.css. Click the download link, save the file and include it in your HTML file using a <link> tag. Here is an example: ...

Object-oriented programming is a common practice in many programming languages. It helps you with the DRY principle (don’t repeat yourself) by allowing you to repeatedly use code from a single code base. How would applying the paradigm work with something other than a programming language, like CSS? Let’s find out how CSS can be written in the same way and what are the benefits of doing so. The Two Principles of OOCSS Object-oriented CSS (OOCSS) is built upon two main principles. Firstly, content should be separated from containers. If content and its container are not tied to each other too closely, it allows you to reuse the containers for different types of content ...