How to Design a Two Column Layout for Your Website Using CSS 2 Columns Using Float, with Optional Header and Footer by Christopher Heng, thesitewizard.com There are many ways to create a two column layout using Cascading Style Sheets (CSS). This article takes you through the steps of using one method. Prerequisites For you to be able to use this article, you need to be able to code directly in both HTML and CSS. My tutorials for the free web editors KompoZer and Nvu may also be used to create 2 column sites, albeit not using CSS. Note that you do not have to be an expert in writing HTML or CSS code. Using Float to Define 2 Columns While there are many methods of using CSS to create a two-column site, this tutorial uses the float property to move one column to the side of another. Compatibility The two-column CSS given here has been tested to work on Internet Explorer 6 and 7, Firefox, Opera, and Safari. The HTML Code for a Basic 2 Column Website The HTML part of the code is fairly simple. The CSS code for this is simple. Miscellaneous Matters Conclusion
36 Resources to Learn HTML5 from the Beginning | Resources HTML5 is buzzing in web design community and making an excitement, as the offered features open many possibilities in creating web pages and web apps. However, HTML5 has many new tags and specifications compare to HTML4, which is often makes some people, particularly beginners, get confused and feel intimidated. So, in this post we try to collect the best sources where you can start learning HTML5 from the very beginning. HTML5 Introduction We will be starting from introduction to HTML5 and its features. A Preview of HTML5 In this article, Lachlan Hunt of a List Apart presented a brief introduction to some of the major features in HTML5. HTML5 Features: What You Need to Know Taken from the source; Remy Sharp talks you through the major changes in the latest version of HTML, and reveals what HTML5 features we’ll all be using very soon A Brief History of HTML5 Jeffrey Way presented an in-depth history of HTML5. HTML5 in WikiPedia Why We Should Using CSS3 and HTML5 Today. What is HTML? HTML5 Audio
CSS Tutorial How to Create Rounded Corners for Your Box Borders in CSS How to Use Border-Radius to Create Rounded or Curved Corners by Christopher Heng, thesitewizard.com If you were to create a rectangular box outline around the content on your web page using Cascading Style Sheets (CSS), the default is that your box borders will have pointed right-angled corners. To get rounded corners for the box, many webmasters in the past have resorted to using images to give the appearance of curved corners. This article shows you how to achieve the same effect using CSS. Who is This Article For? This article is written for someone who knows how to work directly with HTML and CSS code. If you don't have a website, and are reading this article just to get the feel of things, it's best to start by reading How to Make / Create Your Own Website: The Beginner's A-Z Guide instead. Rounded Corners Using CSS 3's Border-Radius The CSS property for creating rounded corners is known as border-radius. Let's take a look at an example box using the border-radius property (below).
Dive Into HTML5 KODY CSS/HTML! Cześć! Dziś obiecany post z kodami, których używam do doskonalenia wyglądu bloga :) Bez zbędnego gadania, bo post będzie i tak długi, przechodzę do rzeczy :) Na pierwszy rzut lecą kody CSS. Jak je wprowadzić w życie? To łatwe, wchodzimy w Szablon -> Dostosuj -> Zaawansowane -> Dodaj arkusz CSS i wklejamy tam poniższe kody. Podświetlenie zdjęcia po najechaniu na nie: Cytat z suwakiem, taki jak widzicie w tym poście. Wyśrodkowanie tekstu w lewej kolumnie (analogicznie z prawą kolumną, left zamieniamy na right) Podkreślenie postu, solid - linia ciągla, dotted - linia kropkowana, dashed - linia kreskowana, zmieniamy wg uznania. Obramowanie komentarza, tutaj podobnie można użyć linii ciągłej, kropkowanej lub kreskowanej. Rozjeżdżające się litery po najechaniu na link HTML. Wycentrowane Nowszy post/Strona główna/Starszy post Najpierw wyszukujemy frazę: <b:includable id='nextprev'> i poniższy kod: Usuwamy i zamieniamy na ten poniżej: "Pokazywanie postów oznaczonych etykietą" usunięte
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website | Smashing Mobile Advertisement CSS3 continues to both excite and frustrate web designers and developers. We are excited about the possibilities that CSS3 brings, and the problems it will solve, but also frustrated by the lack of support in Internet Explorer 8. This article will demonstrate a technique that uses part of CSS3 that is also unsupported by Internet Explorer 8. However, it doesn’t matter as one of the most useful places for this module is somewhere that does have a lot of support — small devices such as the iPhone, and Android devices. In this article I’ll explain how, with a few CSS rules, you can create an iPhone version of your site using CSS3, that will work now. Media Queries If you have ever created a print stylesheet for a website then you will be familiar with the idea of creating a specific stylesheet to come into play under certain conditions – in the case of a print stylesheet when the page is printed. The Media Queries in CSS3 take this idea and extend it. Testing media queries
10 Easy Image Hover Effects You Can Copy and Paste Hover effects are always a fun topic to explore. In the past, we’ve built some awesome examples of CSS hovers that were easy to copy and paste right into your code. Today, we’re going to follow that up with ten new effects specifically built for use with images. Each example comes with an HTML and CSS snippet that you can steal and a live demo so you can see it in action. Sneak Peek Before we get started, take a look at the demo below to see all of the various hover effects that we’ll be building. Demo: Click here to launch. Setup Before we begin creating the individual demos, some basic setup is required. Most of this is basic stuff: box-sizing allows us to manipulate the box model (feel free to apply more specifically if you don’t like the universal selector), and the pic class gives us a place to toss in some generic styling for each photo. Zoom and Pan Our first group of effects involves utilizing some tricks with hidden overflow. Grow Shrink Side Pan Vertical Pan Fun with Transforms Tilt Morph
Zmieniający się obrazek Stopień trudności: * Hej, Koty :) Allz zadała pytanie, czy da się zrobić takie czary, żeby po najechaniu myszką obrazek zmienił się on na inny. Oczywiście, że coś takiego jest możliwe, nawet nie zabiera aż tyle kodu. Mam nadzieję, że efekt Wam się podoba, bo mi bardzo :) Dziękuję Allz za podsunięcie dobrego pomysłu.