background preloader

CSS3 Patterns Gallery

CSS3 Patterns Gallery
Wave (294 B)✖by Paul Salentiny Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines If you have a new pattern to submit, please send a pull request. Does it present a new technique?

Related:  CSS3Web 2.0CodingThe BMD project

CSS3 Transitions 101: What are Transitions? Transitions are the most-used type of CSS3 animation. Despite widespread adoption and a relatively simple syntax, there are several gotchas and options of which even the most knowledgeable developers are blissfully unaware! This is the first in a four-part series about CSS3 transitions but each article can be read individually or out of order. Background Pattern Designs And Resources For Websites Patterns are a useful resource for website design. Filling the background with a full-blown image is no longer a useful solution today as the variety of devices and screen resolutions in the market make it difficult to adapt to them all, although it is true that the latest plugins and scripts offer solutions such as automatic image resizing. Patterns are similar to those images that are indefinitely repeated either horizontally or vertically. That makes a lot more sense today where usability is concerned, especially in responsive design.

Free textures for your next web project It’s as organic as it gets, just in black this time. Made by Carl Download If you want to capture vintage outdoors style, this is definitely the pattern for you. Download CSS Terms and Definitions Thanks to yesterday’s article on Smashing Magazine wherein I covered the use of !important in CSS, my eyes were opened to a small but significant terminology discrepancy. The article used the phrase “the !important CSS declaration” in reference to the word “important” that appears with a preceding exclamation point at the end of a line of CSS. That’s not the correct terminology, and this was mentioned in the comments by Brad Czerniak. I subsequently corrected the wording in the article, and even requested that Smashing Magazine change the title to reflect this improved understanding (which they did early this morning shortly before I published this article).

Pure CSS speech bubbles Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML. The CSS file used in the demo page is heavily commented so that you can see which lines of code are responsible for each part of the effects. Demo: Pure CSS speech bubbles

CSS3 vs jQuery Animations By Siddharth Rao Introduction Flash originally paved the way for us to feature more than just text and images on web pages. It allowed developers to include animations and other rich effects on web pages, leading to a much more colourful and varied user experience. However, Flash was plagued by a number of issues like security, long loading times on mediocre networks, etc. Using PHP/MySQL with Google Maps - API de Google Maps Ben Appleton, Google Geo TeamWith contributions from Lary Stucker, Maps API DeveloperApril 2007 This tutorial is intended for developers who are familiar with PHP/MySQL, and want to learn how to use Google Maps with a MySQL database. After completing this tutorial, you will have a Google Map based off a database of places. The map will differentiate between two types of places—restaurants and bars—by giving their markers distinguishing icons.

Is CSS a programming language? - Software Engineering Stack Exchange Possible Duplicate: Why does it matter that HTML and CSS are not programming languages? As I understand a programming language is something that can be used to solve a problem/perform an alogrithm. Then someone just said to me "I programmed a website using HTML, JavaScript, and CSS", and my immediate reaction was HTML and CSS are not programming languages, then remembered the L in HTML means Language. But still it is a "Markup Language". 5 Not-So-Obvious Metrics That Every Creator Should Track – The Patreon Blog Straight from the Patreon Data Science team, we bring you 5 metrics that you should be paying attention to as you grow your page. 1. Patron retention Pure CSS social media icons (experimental) This is an experiment that creates social media icons using CSS and semantic HTML. It uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript. Demo: Pure CSS social media icons Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

Why moving elements with translate() is better than pos:abs top/left In modern days we have two primary options for moving an element across the screen: using CSS 2D transforms and translate()using position:absolute and top/left Chris Coyier was asked why you should use translate. Embedded Timelines Embedded timelines are an easy way to embed multiple Tweets on your website in a compact, single-column view. Display the latest Tweets from a single Twitter account, multiple accounts, or tap into the worldwide conversation around a topic grouped in a search result. A Twitter collection may be rendered in either a list or a responsive grid template.

Setting up Two-Factor Authentication – Discord Two-Factor Authentication (2FA for short) is a good way to add an extra layer of security to your Discord account to make sure that only you have the ability to log in. Important note: At the moment, you can only enable / disable 2FA on your account from the desktop app or modern browsers. Mobile users will have to access a computer to use 2FA.

Related:  CSS3 tools