Learn SVG
15 Amazing Websites for Finding Free Design Resources
Keeping costs low and clients happy with the work you deliver can be a very difficult balance to strike, especially for freelance designers. Fortunately, there are great free design resources online to help you out. It won’t be a stretch to say that most creatives – whether you’re a web designer, illustrator, photographer, developer, etc. – know what it’s like to work with limited budgets. It can often feel like clients barely have enough to even pay you for your time, let alone have the budget for the truly unique resources that can make a project really stand out. Thankfully, there are some great places on the web that can provide some relief. The following list is for all my fellow freelancers. Free Vectors Vecteezy Vecteezy is definitely a more well-known resource for both premium and free vectors. Alphateck Nick G. Images and Photos Picjumbo PicJumbo is a rare website that provides high quality stock photos free for commercial use. Getty Images FireShot Free Fonts Open Font Library Eamejia
NodeSchool
linear-gradient
The CSS linear-gradient() function creates an <image> which represents a linear gradient of colors. The result of this function is an object of the CSS <gradient> data type. Like any other gradient, a CSS linear gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has neither natural or preferred size, nor ratio. Linear gradients are defined by an axis, the gradient line, with each point on it being of a different color. The gradient line is defined by the center of the box containing the gradient image and by an angle. The starting point is the point on the gradient line where the color starts. Similarly the ending point is the point on the gradient line where the final color is reached. These somewhat complex definitions of the starting and ending points lead to an interesting property sometimes called magic corners : the nearby corners of the starting and ending points also have the same color as the respective starting and ending points. Syntax Values
Setting Backgrounds & Gradients - Learn to Code HTML
Backgrounds have a significant impact on the design of a website. They help create a site’s look and feel, establish groupings, and assign priority, and they have a considerable influence on a website’s usability. Within CSS, element backgrounds can be a solid color, an image, a gradient, or a combination of these. As we decide how to implement these backgrounds, we should keep in mind that every background contributes to the overall appearance of our website. In this lesson we’re going to take a look at how to assign different types of backgrounds, including gradients, to elements; we’ll also play around with a handful of CSS3 properties specific to backgrounds. Adding a Background Color#background-color The quickest way to add a background to an element is to add a single-color background using the background or background-color property. When adding a background color, we have a few options for the values we can use. Transparent Backgrounds Adding a Background Image#background-image
12 Fun Sharing Button Effects
Danny Markov Everyone loves eye candy and smooth CSS3 animations. This is why today we are sharing our latest experiment with you – a collection of effects for revealing sharing buttons. How they’re made Most of the different transformations and effects on the demos are done exclusively via CSS, so they should appear bug and lag free (if you are running a modern browser). Transition – the transition property sets a duration of time in which CSS properties can transform their values gradually making HTML objects animate smoothly. The Fall Back Effect For one of the Demos we also used a fun jQuery plugin called jRumble. We hope you enjoy our collections of effects. Presenting Bootstrap Studio a revolutionary tool that developers and designers use to createbeautiful interfaces using the Bootstrap Framework. Learn more by Danny Markov Danny is Tutorialzine's Bootstrap and HTML5 expert.
media queries · tutorials · WPD · WebPlatform.org
{{{Editorial notes}}} By Mike Sierra Summary Media queries offer an easy way for the client browser to assign different mobile, tablet, and desktop interfaces. CSS media queries offers an easy way to target custom interfaces to more than one kind of device. The media query feature provides a way for a client browser to respond based on inherent characteristics of the device on which it runs. Assigning alternative interfaces Media queries extend an older CSS specification known as media types, which assigned browsers to high-level categories such asscreen and handheld, or print to re-style a web page's printed output. Unlike media types, media queries offer more details about the device. screen and (max-width: 320px) Media queries are enclosed in parentheses and associated with media types with the and keyword. screen and (max-width: 320px), handheld There are three ways to specify media queries: As part of link tags within the HTML's head region. not all and (orientation) Media Query Listeners
media queries
"Responsive Design" is the strategy of making a site that "responds" to the browser and device that it is being shown on... by looking awesome no matter what. Media queries are the most powerful tool for doing this. Let's take our layout that uses percent widths and have it display in one column when the browser is too small to fit the menu in the sidebar: Now when you resize your browser it's even cooler than ever! Lorem ipsum dolor sit amet, consectetur adipiscing elit. You can make your layout look even better on mobile using meta viewport.
Responsive Design with CSS3 Media Queries
Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn't work any more. Web design needs to be adaptive. The layout needs to be automatically adjusted to fit all display resolution and devices. View Demo Responsive Design Download Demo ZIP See It in Action First Before you start, check the final demo to see how it looks like. More Examples If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr. Overview The page's container has a width of 980px which is optimized for any resolution wider than 1024px. HTML Code I'm not going to go through the details of the HTML code. HTML5.js Note that I use HTML5 markup in my demo. Main Structure CSS
Logic in Media Queries
Just in case you have brain farts about this constantly like I do. If That's what media queries are: logical if statements. And The keyword and. Or Comma separate. Technically these are treated like two separate media queries, but that is effectively or. Not Reverse the logic with the keyword not. Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Exclusive To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default. Overriding There is nothing preventing more than one media query from being true at the same time. Media queries add no specificity to the selectors they contain, but source order still matters. Mobile First Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. Desktop First Gettin Wacky
