Archive for the ‘CSS’ Category
Web design audience can’t stop buzzing about the grid system. On one hand it allows flexibility and encourages correlation between web page elements, eases the integration of pics and texts, lets us forget about the outdated HTML tables and helps to eliminate significant coding errors. But even cross-browser support doesn’t save it from bulging at the seams. Even though the most popular 960 grid system tries to lull us into a false sense of security, experts feel its inconsistency with the upcoming web trends. So in today’s post we’ve decided to dig deeper into the future of the grid system in web design and to try to figure out what this future will mean for us.
What seems to be the problem, officer?
So the tech world keeps moving forward. Since we are more accustomed to logical organization of information, web pages need to be well structured. Grid experts track the stats on the number of Internet users at different periods of time, on screen resolutions, operating systems and devices they work with. And they come to a conclusion that we lack some universal grid system to meet the modern standards, some new approach to comply with technologies that keep the web going. Today we’d like to place this question on the agenda and list the best traditional and innovative grid systems found on the web, just so you know better what we’re talking about.
* * *
960 Grid System
960 grid system is the most honorable and long-standing grid system used by web developers today. It comprises the fixed number of columns within the width of 960px. Why 960? It makes for many clean divisions with the whole numbers – it’s surely convenient for calculating the margins and widths as well as the columns location. 960gs is rendered by 12-column and 16-column grid types. If you need extra structure complexity the option of the 24-column grid is also at your disposal. What’s good about the 960gs is a nice multi-platform and cross-browser support, easy calculations and source ordering. If you feel 960gs is enough for your needs, feel free to build it using special ready-made tutorials and actions that don’t require much knowledge and skills.
Although it does a pretty good job in its field and fits the majority of screens, new screens and resolutions are getting larger, so 960 is sometimes not enough for them. This is because of its 20px gutters and gutter spaces that leave just 940px for the content area itself. And the modern web requires higher parameters. Let’s take fonts for instance: the sizes have increased within the last couple of years which should lead to larger content area and gutter space. Operating Systems are able to display much higher resolutions and complex layouts within the last decade. And even classic standard resolution of 1024×768 seems to be getting out-of-date. So it gets obvious that 960gs is not a panacea nowadays.
The power of CSS3 is truly unconquerable and with the lapse of time more and more web developers and designers follow the cult of this technique. Today we would like to present you a collection of CSS3 hover effect tutorials. Basically hover is an effect that occurs while placing the mouse cursor over some object on the website (such as a link, an image or even a simple text). This effect is a very important design element that is mostly used for styling and usability. Hover effect adds dynamics to the website and improves user experience instantly. This effect is unique due to its combination of creative and functional features. Now let’s dive into the CSS3 magic along with these awesome CSS3 hover effect tutorials.
Original Hover Effects with CSS3
* * *
Amazing Hover Effects with CSS3
* * *
Why are website forms so important? Logically enough, forms play a crucial role for the website conversion, and therefore impact the project success indicators on the whole. Having some basic knowledge of HTML, you’ll find it pretty easy to generate a standard form. But it’s not as easy to design and style your website form to make it look exquisite and be easy-to-use and accessible for all users at the same time. Hopefully you’ll find the article valuable while designing and coding website forms.
Most of web forms are known to be created with PHP, because it is an open-source coding environment which works perfectly with all major browsers and is widely available. But we shouldn’t stay too conservative and consider the other back-end coding options like ASP, Pearl, Ajax and JavaScript as well as advanced CSS properties to diversify the form appearance and functionality.
Generally, any web form acts in two ways: it generates an email or works with a database. The first rule while working with forms might be to avoid “re-inventing the wheel”. There are tons of open source services for generating the necessary codes and make the form do what it is supposed to do. One of such solution is Web Form Factory and is available for free on the Internet.
Wufoo is another popular option to make the web form creation an easy and painless task. They offer the creation wizard both for free and for the fee. But their prices are quite reasonable for such an efficient way of forms implementation.
Make Use of <Fieldset> And <Legend> Elements
It’s always good to group the related fields together, especially if you generate a lengthy form and require additional usability. The form is to be divided into separate manageable visual components.
The elements like <fieldset> and <legend> are the options to provide such a structuring for your form. The <fieldset> element features a border by default and you may just change or remove it within CSS.
You may group several related fields of a single form using <fieldset> and <legend> elements exactly like in the piece of code below:
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
While preparing this list of free CSS frameworks I’ve noticed that it is hard to find the best one among the variety of software which differs by size, age and popularity. I mean we all know such famous frameworks as 960 GS or BlueTrip, although sometimes you don’t need to use such monstrous and heavy tools for small and middle sized projects. Obviously many of you are familiar with CSS framework tools and probably you already use them. Mostly these free CSS frameworks provide powerful options for designing and creating original layout for the web page, but sometimes small details are very important and that’s why we’ve included into our collection several dedicated and light-weight tools like 520 GS (for creating Facebook layout) or Baseline (created for Typography addicts). We strongly believe that you won’t skip any item from our list and will use them in future.
1. Baseline
* * *
2. BlueTrip
* * *
A lot of you might have noticed that web developers tend to use large background images for their websites during the past couple of years. One of the reasons is the development of Internet connection – loading large images is no longer a rare thing. Plus, there’s no need to explain that large images are impressive and portray the website message brighter. You may see the content, headings and various functions placed on top of the large background, often on half-transparent blocks. Large images may add some special feeling of contrast and make your website stand out from a range of the similar ones. With large background pics you may make your site layout appealing and trendy as well as display the offered products or services more vividly.
What websites usually implement large background images? Predominantly these are websites running hotel, traveling, restaurant, design, photography and art businesses. Large images seem to be more suitable for the pages with the less complex structure and minor content. They are particularly great for the websites serving as business cards.
The large backgrounds imply not only photos but also illustrations, animations or even videos. Photos and illustrations are far more popular, though some well-thought animation may also look impressive. We will talk about the static large background images that make the visitors stay longer on your website. The trend of using large backgrounds is irresistible and this trend is not going anywhere anytime soon, so if you need an awesome modern website feel free to make use of it.
General Types of Large Background Images
We discern the following types of Large Background Images:
- A large image with a fixed positioning like in the examples below:
- A full size set up image that doesn’t fade into the background color.
Upstruct.com
***
Cpeople.ru
***
Thank goodness it’s Friday and the weekend will start very soon. But there’s still time to spend this day with use and our today’s collection will help you to do just that. CSS3 brings us joy and happiness with fresh and unique techniques that execute complicated tasks in a simple way. It is hard to find web designer who wouldn’t love all those design goodies that were created with the help of CSS3. We’ve tried to compile a balanced collection of advanced CSS3 tutorials that cover various spheres of web design including typography, buttons, selectors, various visual effects and so on. By the way you might be interested in checking out our previous collection of 20 Useful CSS3 Tutorials and Resources that we’ve published some months ago. So, have fun here and we sincerely hope that you’ll find useful stuff in our collection. Stay tuned and have a nice forthcoming weekend folks!
1. CSS3 Loading Spinner
* * *
2. Create Animated Price Grid Using CSS3
Hey there folks! We decided to devote our today’s post to something really useful and time-saving. So, please welcome our list of 10 online tools for CSS editing or creating ready elements that require styles. Now you can perform some styling actions with your CSS sheet using powerful and simple online helpers. Our list contains interesting services that allow you to edit, compress, format css files, create beautiful CSS buttons, generate gradients, and import and process CSS files.
Among these you’ll find some dedicated tools so please pay your attention to extremely popular CSS3 Generator – this excellent service would help you to generate codes for all of the CSS3 properties and easily paste them into your CSS sheet. We hope that this range of various tools will help you find a number of services for instant usage. Of course feel free to share your experience and let us know about your experience of working with CSS tools that are either present in this post or that we might have missed.
1. CleanCSS
* * *
2. StyleNeat
* * *
Do you know much about CSS? Well ok, we admit you may know a lot about how to work with it and how to make your website look really stunning with various useful CSS features. But what we’re sure you don’t know about CSS is its major historical milestones as well as some facts related to CSS functionality.
This infographic will also be interesting and useful for CSS beginners and will help them learn the very basics of this technology. And now please go ahead and see the CSS infographic itself. We will also be happy to know your thoughts about it in the comments.
Being a salvation for Apple geeks, the iPad caused a painful headache for web designers that faced the layout issues. And some time ago we’ve started thinking on this and highlighted web design issues that might occur with developing websites for the iPad. In general creating website layout with the help of CSS is not really that much of a challenge for the experienced web designer. But the whole nature of the iPad will surprise with some small problems that will cause a real pain in you-know-where while trying to fix them. So while a creating website or optimizing it for iPad you should remember several important things about CSS and the iPad.
Links and Hover effects
Yes, the iPad has a touch screen and you have to use what appears to be a totally different technique for placing and displaying links at your website. It means that you have to avoid links in text placing them aside and marking them out to make them larger (actually it also concerns all other interactive elements of your website). Such great CSS effect as hover will not be user-friendly for touch screen and you should consider that too. And don’t forget that jQuery mouse events are not for iDevices either, so you’ll gain some extra problems along with them (for example you have to click the link twice, first time will show you a hover, second time will actually click the link).
Fixed position
If you want to use such CSS property as
position: fixed
it won’t be working in Mobile Safari. Front-end developer Richard Herrera has mentioned at his blog that this happens because:
Imagine a book in front of you. Take a piece of paper, cut a 320×416 square in it, and lay it over the book. To read the book, move the paper around and position the hole over the words you want to see. This is exactly what Mobile Safari’s viewport is doing. When you flick and scroll, you’re moving the viewport around while the website behind it stays static.
Interesting solution on how to fix this is offered by cubiq.org in their Scrolling DIV on iPhone and iPad devices article.
Orientation
Follow TemplateMonster Updates
Rss Feed: