Create a simple Responsive Design for a blog site using CSS media queries
Responsive Web Design is a design done with CSS3 Media Queries that change according to the visitor’s…
Responsive Web Design is a design done with CSS3 Media Queries that change according to the visitor’s…
I’m sure you’re aware what a CMS is and how it can help you and your site be more successful. Just in case you’re a newbie in Web Development, let me just say that a CMS can do wonders. CMS (Content Management System) can help you to create a website in a matter of minutes and then you can use it to edit your website content and add new articles.
We’ll be creating a simple but fully functional website. We’ll use the design, HTML and CSS from one of my previous blog posts: A step-by-step walkthrough for coding a Web Site from a Photoshop template. So, HTML and CSS are basically already done. Of course, we need to integrate these files into ASP.NET templates, so the basic HTML & CSS will be repeated.
Finally, the time has come for another Blog entry, cool and breezy, just right for the summertime. We’re going to do some XHTML/CSS Tips and Tricks you may or may not know. Either way, it’ll be a quick and simple post, just long enough for you to do the coding while enjoying a nice cold beer. 🙂
This time we are going to do some PSD to XHTML/CSS, meaning we will make fully functional web page from a template we created in Photoshop. For this tutorial I created a very simple web page template which you can download in PSD format. It isn’t very original-looking either, but it will serve it’s purpose. And of course you can use it in any way (except of course altering the Croatia images or claiming them as your own).
CSS Sprites are a neat little trick which enables us to store the graphics we need to display menus, icons or buttons in one big image while showing only a part of that image at a time. This enables us to instantly show another part of the image when we need it, thus creating the desired effect, saving bandwidth and removing image flicker.
As we all know CSS files are very useful to reduce the amount of HTML we need…