Long Shadow Buttons with CSS3 and Sass - Creative Punch Alongside flat design, long shadow design is definitely still rising in popularity. It is used in many ways but still looks best for icons! In this article I will show you how you can easily make long shadow buttons with CSS3 box-shadow by using Sass. We’ll also look at some best practices to make our code more reusable, where to get the right color values for all the popular brands and using icon fonts. So let’s dig into the code for our long shadow buttons! Using icon fonts and preparing our HTML We’ll be using both Zocial and Font Awesome. So let’s import the fonts for our long shadow icons in our Sass CSS. Note: I use the SCSS syntax which is the preferred syntax since Sass 3. Now, let’s add the corresponding HTML. Styling the buttons Now, as you can see aside from the icon classes, I also added the classes twitter, facebook, stumbleupon and google-plus, as well as the class social-icon. The plan here is to make our CSS as reusable as possible. So let’s style those classes! That’s it!
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules.
Things To Avoid When Writing CSS Things To Avoid When Writing CSS Disclaimer: You may disagree with some of the things I’ve written in the ensuing article. That is okay. Multiple files A lot of web development seems to be about splitting things up into manageable chunks or “components”. This doesn’t work so well for CSS. CSS is an ordered, exception based language and there is no easy way for a file listing (which is typically organised alphabetically) to represent it coherently. - buttons.css - reset.css So you have two choices: You can either live in denial, grumbling that “specificity shouldn’t be part of CSS” as you try to force a square peg into a round hole, or you can work in one, well-commented file that clearly represents the arc of your inheritance-harnessing cascade. Summary: You shouldn’t organise CSS by splitting it into separate files any more than you should organise a pane of glass by dropping it on a concrete floor. Nesting (with Sass) I’m ambivalent about Sass. Nesting, though? Fucking. Pixel units What?
CSS code structure for HTML 5: some useful guidelines In this post I want to illustrate some useful guidelines about how to implement a well organized CSS code structure in view of introduction of HTML 5 markup language. They are not general rules but simple suggestions you can follow in order to improve the readability, manageability, and general organization of CSS code. These suggestions are especially useful if you have to work on complex CSS files that otherwise can be difficult to manage. I prefer to separate CSS code in three distinct sections: a first section that contains general HTML tags; a second section that contains structure tags; a last section with custom classes. Section 1: General HTML tagsIn this section I divide the code in two subsections. Section 1: Subsection 1How you know, regarding CSS reset, this practice is used to reset default browser styles for HTML standard elements (body, h1, p, ul, li, ...). border:0;margin:0;padding:0;font-size:100%;... /* Subsection 2: Standard HTML tags redefinition */body, form, input {
Quick Tip: The Simplest Way To Center Elements Vertically And Horizontally Danny Markov Flexbox is a relatively new addition to the CSS world and we keep finding more and more excellent applications for it. We can even solve the age-old problem with centering an element both vertically and horizontally with CSS. It is easier than you can imagine – it is only three lines of code, doesn’t require you to specify the size of the centered element and is responsive-friendly! This technique works in all modern browsers – IE10+, Chrome, Firefox and Safari (with the -webkit- prefix). See the full compatibility table here. <div class="container"><! Run The HTML The idea, of course, revolves around flexbox. You can place this container div anywhere you want. The CSS As we said earlier, we will be using only three lines of code. Every flex container has two axis for positioning elements. Now all that we need to do is center both axis. Conclusion There are lots of other techniques for centering content with CSS, but flexbox makes this a whole lot simpler and more elegant.
Book - Scalable and Modular Architecture for CSS I have long lost count of how many web sites I’ve built. You would think after having built a few hundred of them I would have discovered the “one true way” of doing it. I don’t think there is one true way. What I have discovered are techniques that can keep CSS more organized and more structured, leading to code that is easier to build and easier to maintain. I have been analyzing my process (and the process of those around me) and figuring out how best to structure code for projects on a larger scale. SMACSS (pronounced “smacks”) is more style guide than rigid framework. Inspiration In trying to learn more about what does and doesn't work in maintaining larger projects, I looked at how others were trying to solve similar problems. What’s in here? My thoughts have been compartmentalized around a number of topics related to CSS architecture. Now get started and dive in!
HTML Color Codes 30 CSS Hover Effects For Buttons I have created 30 CSS button hover effects that uses only CSS for the animation. In this tutorial I will only explain how the sixth example works. You can view the code for the rest of the buttons by downloading the source code. Be careful not to ruin your website design and make sure you are using the buttons that fit your design the most. Some of the effects are quite, let's call them 'dramatic' and those effects may be suited for a page where you only have 1 button or just a few. The animations are very easy to customize since they are made out of just CSS. Let's make the first button of the sixth example. <div class="wrapper-inner-tab-backgrounds-first"><div class="sim-button button6"><span>Login</span></div></div> Inside the '.button6' class the text is wrapped in a span. First we have to create the usual set of styles for a button. The span has an absolute position because i want the text inside the button to float above the next element.
30 kostenlose responsive jQuery-Slideshow-Plugins Responsive jQuery Slider sind großartig, um Slide-Effekte in responsive Websites und Templates einzufügen. Wie dieser Artikel zeigt, gibt eine Menge sehr gute und einfache Möglichkeiten, beeindruckende Slideshows für Deine Webprojekte zu realisieren. In letzter Zeit ist Responsive Webdesign das wohl meist diskutierte und heißeste Thema in der Webdesign-Branche. Die Umsetzung einer mobilen Applikation für die Website ist dagegen recht teuer und zudem aufwendiger in der Wartung für die Bereitstellung gleicher Inhalte, das zusätzlich mit Kosten verbunden ist. Heute gibt es tonnenweise von Frameworks zur Erstellung und Erweiterung von responsiven Websites. In diesem Artikel möchte ich Dir 30 kostenfreie Lösungen vorstellen, mit denen Du responsive Slideshows für Deine Website erstellen kannst. 1. Auf Designmodo wird ein leicht nachvollziehbares Tutorial vorgestellt, mit dem Du mittels CSS3 und jQuery einen mobiltauglichen Bilder-Slider erstellen kannst. 2. 3. 4. 5. 6. wmuSlider 7. 8. 9. 10.
The Ultimate Guide to .htaccess Files Apache's .htaccess configuration files have baffled countless developers. This tutorial aims to break through this confusion by focusing on examples and thorough descriptions. Among the benefits of learning .htaccess configuration is automatic gzipping of your content, providing friendlier URLs, preventing hotlinking, improving caching, and more. First, the basics. Introduction: I’ve read a number of .htaccess articles online. “Give a man a fish and he will eat for a day. In this article I’m going to try to not just show you examples of useful .htaccess directives, but explain exactly what is going on. My focus will be on Apache 2, however much of this will apply to Apache 1.3 and I'll try to point out any differences that I know of. Finally, this tutorial will make the most sense if you read it in order. What is .htaccess? To quote Apache: .htaccess files (or “distributed configuration files”) provide a way to make configuration changes on a per-directory basis. Directives Comments Headers