Archive

Archive for January, 2012

360 Free Valentine’s Day Photoshop Brushes, Patterns, and Textures!

January 27th, 2012 No comments
360 Free Valentine's Day Photoshop Brushes, Patterns, and Textures!

Love is in the air!…Or is it?

As the day devoted to love fast approaches, it brings giggles and butterflies, and for some sniffles and tears. Whether you are single or attached, the universal symbol of a heart signifies warmth and affection and is easily recognizable through any language barrier. This year, why not show how you feel to that special someone by using these awesome free Valentines’ Day Photoshop Brushes, Patterns, and Textures in your next project full of love? For me, nothing says “I love you” better than a homemade gift from the heart! What is your favorite thing to receive on this mushy day of sweetness and chocolate covered strawberries? Let us know in the comments below!

200 Valentine’s Day Photoshop Brushes

Hearts N Bokeh

Set of 6 Hearts and Bokeh Brushes. Enjoy!

Brush Hearts

Set of 12 Heart Brushes. Enjoy!

Heart Brush Pack 01

50 heart brushes for Photoshop. Enjoy!

Heart Fractal Brushes

A set of 11 Hearts brushes made with Apophysis. Enjoy!

Hearts Brushes II

25 cute heart brushes for Photoshop!

Valentine 2010 PS Brushes

This set of 21 brushes are useful for creating greeting cards not only for Valentines Day, but for other occasions as well such as birthdays and anniversaries!

Flowers, Swirls and Hearts

Contains 7 high-resolution Photoshop CS3 brushes.

Heart Glitter Brush

This set contains 5 simple brushes.

Hearts and Love Brushes

12 brushes representing hearts that can be used for backgrounds, wallpapers, and cards!

Heart Brushes

Enjoy these 20 Heart Brushes!

 

Valentine Brush Set

Valentine Brush set consisting of 24 Valentine’s Day postage, love letters, postcards, and envelopes.

75 Valentine’s Day Photoshop Patterns

Heart Tatewaku

Enjoy these 8 seamless heart patterns!

Heart Pattern

Heart pattern in .pat format.

Pixel Heart Patterns for PS

This pack contains 24 patterns in total, Photoshop .pat and .png files. Hearts come in 8 different colors and 3 different spacing sizes. Consider them with Postcard Printing

Hearts Pattern

This pattern was made with Photoshop CS4. Enjoy!

Heart Patterns

This set consists of 6 adorable heart patterns. Enjoy!

Transparent Red Hearts Tile

This is a seamless, transparent tile. It will repeat seamlessly when placed beside itself on any side. It’s endless!

Scottish Heart Pattern

Enjoy this cute seamless heart pattern!

Heart Pixel Pattern Pack

Each pattern is 2-color on an opaque background in .png format for wide-usage. You could easily color these and/or put them on a background for a nice effect.

Four Free Valentine Patterns

Download these lovely Valentine Patterns in High Resolution JPG!

Heart Patterns

Set of 4 heart patterns.

Soft Waxen Valentine Hearts Pattern

Yummy!

Hearts Patterns

Over a dozen variations of seamless heart patterns!

Love Lies Bleeding

Rich deep colors.

Love Love Love

Love Love Love this pattern!

Valentine Patterns

This pack includes 4 seamless Valentine’s Day Patterns.

International Love

So soft and surreal!

Falling in love

Bright pinks and sparkling yellows will surely get you falling in love with this pattern!

Lovely Valentine’s Day

10 Lovely Valentine’s Day Heart Patterns!

85 Valentine’s Day Photoshop Textures

Valentine’s Paper Textures Pack 1

Pack one of two contains 21 Large Valentine’s Day Textures.

Valentine’s Paper Textures Pack 2

Pack two of two contains 18 Large Valentine’s Day Textures.

Sweet Valentine Textures

23 Sweet Valentine’s Textures. Enjoy!

Valentine Textures

4 Valentine textures [500×500].

CoffeeShop Valentine Textures

These 5 Valentine textures are a bit grungy and not your typical “pretty” paper, but we think you will like them!

Vintage Valentine Paper

Set of 10 Vintage Valentine Paper.

Let us know in the comments below your favorites!

 

Categories: Others Tags:

360 Free Valentine’s Day Photoshop Brushes, Patterns, and Textures!

January 27th, 2012 No comments
360 Free Valentine's Day Photoshop Brushes, Patterns, and Textures!

Love is in the air!…Or is it?

As the day devoted to love fast approaches, it brings giggles and butterflies, and for some sniffles and tears. Whether you are single or attached, the universal symbol of a heart signifies warmth and affection and is easily recognizable through any language barrier. This year, why not show how you feel to that special someone by using these awesome free Valentines’ Day Photoshop Brushes, Patterns, and Textures in your next project full of love? For me, nothing says “I love you” better than a homemade gift from the heart! What is your favorite thing to receive on this mushy day of sweetness and chocolate covered strawberries? Let us know in the comments below!

200 Valentine’s Day Photoshop Brushes

Hearts N Bokeh

Set of 6 Hearts and Bokeh Brushes. Enjoy!

Brush Hearts

Set of 12 Heart Brushes. Enjoy!

Heart Brush Pack 01

50 heart brushes for Photoshop. Enjoy!

Heart Fractal Brushes

A set of 11 Hearts brushes made with Apophysis. Enjoy!

Hearts Brushes II

25 cute heart brushes for Photoshop!

Valentine 2010 PS Brushes

This set of 21 brushes are useful for creating greeting cards not only for Valentines Day, but for other occasions as well such as birthdays and anniversaries!

Flowers, Swirls and Hearts

Contains 7 high-resolution Photoshop CS3 brushes.

Heart Glitter Brush

This set contains 5 simple brushes.

Hearts and Love Brushes

12 brushes representing hearts that can be used for backgrounds, wallpapers, and cards!

Heart Brushes

Enjoy these 20 Heart Brushes!

Valentine Brush Set

Valentine Brush set consisting of 24 Valentine’s Day postage, love letters, postcards, and envelopes.

75 Valentine’s Day Photoshop Patterns

Heart Tatewaku

Enjoy these 8 seamless heart patterns!

Heart Pattern

Heart pattern in .pat format.

Pixel Heart Patterns for PS

This pack contains 24 patterns in total, Photoshop .pat and .png files. Hearts come in 8 different colors and 3 different spacing sizes. Consider them with Postcard Printing

Hearts Pattern

This pattern was made with Photoshop CS4. Enjoy!

Heart Patterns

This set consists of 6 adorable heart patterns. Enjoy!

Transparent Red Hearts Tile

This is a seamless, transparent tile. It will repeat seamlessly when placed beside itself on any side. It’s endless!

Scottish Heart Pattern

Enjoy this cute seamless heart pattern!

Heart Pixel Pattern Pack

Each pattern is 2-color on an opaque background in .png format for wide-usage. You could easily color these and/or put them on a background for a nice effect.

Four Free Valentine Patterns

Download these lovely Valentine Patterns in High Resolution JPG!

Heart Patterns

Set of 4 heart patterns.

Soft Waxen Valentine Hearts Pattern

Yummy!

Hearts Patterns

Over a dozen variations of seamless heart patterns!

Love Lies Bleeding

Rich deep colors.

Love Love Love

Love Love Love this pattern!

Valentine Patterns

This pack includes 4 seamless Valentine’s Day Patterns.

International Love

So soft and surreal!

Falling in love

Bright pinks and sparkling yellows will surely get you falling in love with this pattern!

Lovely Valentine’s Day

10 Lovely Valentine’s Day Heart Patterns!

85 Valentine’s Day Photoshop Textures

Valentine’s Paper Textures Pack 1

Pack one of two contains 21 Large Valentine’s Day Textures.

Valentine’s Paper Textures Pack 2

Pack two of two contains 18 Large Valentine’s Day Textures.

Sweet Valentine Textures

23 Sweet Valentine’s Textures. Enjoy!

Valentine Textures

4 Valentine textures [500×500].

CoffeeShop Valentine Textures

These 5 Valentine textures are a bit grungy and not your typical “pretty” paper, but we think you will like them!

Vintage Valentine Paper

Set of 10 Vintage Valentine Paper.

Let us know in the comments below your favorites!

Categories: Others Tags:

Create a Full Page Background Image with CSS3

January 5th, 2012 No comments
Centro Genesis background image with css3

The other day we looked at 10 Awesome Websites With Full-Screen Background Images.  At the beginning of the article I had mentioned that there were a few ways of approaching this effect, some developers prefer to do it with jQuery, some with CSS, and others with Flash.  In this article, we’re going to take a look at how to achieve a full-screen background image with CSS.

CSS3 allows us to choose between a few different values for the “background-size” property.  The properties are length, percentage, cover, and contain.  The value that we’re going to use first is the “cover” value, which will scale an image to a size that will allow it to fill the content area.  I would like to point out that in doing this some parts of the image may be cut off depending on the screen resolution or dimensions of the browser window.  Centro Genesis is a good example.  Look at how the background image displays in a widescreen browser.

Now, look at how the image appears in a traditional square browser. The majority of the photo is the same, it just cuts off a piece of it in order to fill the height of the screen.

The code for this is method is really quite simple.  All you have to do is insert these few lines of CSS in your external CSS file or in the head of your page.

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

That was easy.  Now let’s take a closer look at what we did.  With the first line we’re calling in our background image and applying some style to it, “background: url(images/bg.jpg)” is pulling up our actual image.  Then “no-repeat” is telling the browser to not repeat the image, “center center” is telling the browser to center the image horizontally and vertically, and “fixed” is telling the image to fix itself in that position and not scroll with the rest of the content on the page if there is a need to scroll.  After we’ve called the background image and styled it we target all of the major browsers, webkit covers Safari 5+ and Chrome, Moz is Mozilla Firefox 4+, -o is Opera, and the plain and simple background-size with no prefix takes care if IE9+.

This technique is simple and works, but you’re relying on one image to please all resolution sizes.  How do you decide what dimensions to use for your one background image?  If you have an image that’s 1900px wide and someone’s trying to view your site on their mobile phone, the image may take quite some time to load.  But if you try to shoot the gap and go with an image that’s around 1,000px wide then the image may become pixilated and blurry to anyone viewing your site on a widescreen monitor with the resolution set to 1440px.  And chances are even at 1,000px it’s still going to take that mobile viewer a while to fully load your site because of your large background image.

Before you curse the variables like screen resolution and monitor shapes that can make our jobs so frustrating at times, allow me to give you the answer you’re looking for: media queries.  CSS will allow you to define different attributes for various parameters.  In other words, you can set a media query that tells a browser to load a largeBG.jpg, mediumBG.jpg, or a smallBG.jpg depending on what the browser dimensions of the viewer are.

For example, rather than defining your background image within the HTML of your site let’s say you create a div for your page and assign it the id of “container”.  Pretty standard.  Much like we did in the first method, we’re going to assign our “container” div id with our background image, add some style, then tell it to cover.  I would recommend making your “largeBG.jpg” image somewhere in the ballpark of 1440px wide to 1900px wide.

#container{
background: url(images/largeBG.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Now that we’ve got the big version of our background image set, we can move on to the medium.  This is a little different as we’re going to have to do a media query to tell the browser to load a smaller version of our background image.  I typically set a media query for a screen resolution width of 1024, as this is the resolution of an iPad and the possibility of the viewer relying on a network rather than high speed wifi to load the page.  To set a media query for 1024 you simply add this line in to your CSS.

@media only screen and (max-width: 1024px) and (orientation:landscape) {
#container { background: url(images/mediumBG.jpg) 50% 0 no-repeat fixed; !important; background-size: 100% auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

The background-size properties are somewhat optional at this point.  You can’t adjust the resolution of your iPad, but you have to remember that this media query is not specifically targeting iPad’s, it’s targeting that screen resolution.  Since there are surely still a large portion of web surfers on older monitors set in the ballpark of 1024×768, it’s an easy enough step to enhance their viewing experience a little more.

After defining the landscape view for iPad’s let’s make a media query for the portrait view.  Depending on your image, you may want to consider putting in a cropped, taller version of your image here so that it display’s full screen without getting too distorted and pixilated.  You’ll also want to adjust the positioning to make sure the image stays aligned properly.

@media only screen and (min-width: 768px) and (max-width: 991px) {
#container { background: url(images/mediumTallBG.jpg) 50% 80% no-repeat fixed !important
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

Finally, we can set another media query for mobile devices.

@media only screen and (min-width: 0px) and (max-width: 767px) {
#container { background: url(images/smalBG.jpg) 50% 80% no-repeat fixed !important; background-size: auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

I would encourage you to play around with these tricks and leave a link to the page you’ve created in the comments section below so we can all see what you’ve come up with.


About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder. Follow him on Twitter @TheScottStanton.

The post Create a Full Page Background Image with CSS3 appeared first on Web Design Dev.


Create a Full Page Background Image with CSS3 was first posted on January 5, 2012 at 11:45 am.
©2022 “Web Design Dev“. Use of this feed is for personal non-commercial use only. If you are not reading this article in your feed reader, then the site is guilty of copyright infringement. Please contact me at jc@ventureupwards.com

Categories: Others, Programming Tags: