Skip to content
Permalink
Browse files

Initial commit

  • Loading branch information...
Catalin Rosu
Catalin Rosu committed Dec 29, 2013
0 parents commit 5222844d8b39a5c13254b32804c8a406f0a81e7f
Showing with 21,042 additions and 0 deletions.
  1. +2 −0 .gitignore
  2. +5 −0 _config.yml
  3. +44 −0 _layouts/default.html
  4. +9 −0 _layouts/post.html
  5. +19 −0 _posts/2009-09-20-css-tips-and-tricks.markdown
  6. +101 −0 _posts/2009-09-24-create-a-cool-wallpaper.markdown
  7. +99 −0 _posts/2009-10-23-style-an-input-button.markdown
  8. +106 −0 _posts/2009-11-01-3d-typography-effect.markdown
  9. +170 −0 _posts/2009-11-07-css-tips-and-tricks-you-should-always-use.markdown
  10. +44 −0 _posts/2009-11-20-get-rid-of-safari-blue-input-outer-glow-once-and-for-all.markdown
  11. +117 −0 _posts/2009-12-01-things-you-should-know-about-css-anatomy.markdown
  12. +67 −0 _posts/2009-12-13-drop-shadow-effect-using-css.markdown
  13. +179 −0 _posts/2009-12-19-design-love-heart-wallpaper.markdown
  14. +39 −0 _posts/2010-01-30-center-a-block-element-without-knowing-its-width.markdown
  15. +62 −0 _posts/2010-02-01-submit-form-on-enter-key-using-anchor.markdown
  16. +119 −0 _posts/2010-05-05-outline-dotted-border-and-image-replacement-technique.markdown
  17. +170 −0 _posts/2010-07-07-web-usability-tips-for-your-website.markdown
  18. +182 −0 _posts/2010-09-21-css-shorthand-tips.markdown
  19. +104 −0 _posts/2010-09-29-tools-to-optimize-images.markdown
  20. +93 −0 _posts/2010-10-05-center-a-block-element-without-knowing-its-width-part-ii.markdown
  21. +119 −0 _posts/2010-10-19-free-text-editors-tools-for-developers.markdown
  22. +138 −0 _posts/2010-10-27-tips-to-organize-your-css.markdown
  23. +121 −0 _posts/2010-11-02-css3-font-face-or-how-to-use-a-custom-font-for-your-website.markdown
  24. +118 −0 _posts/2010-11-08-png8-alpha-transparency-using-adobe-fireworks.markdown
  25. +206 −0 _posts/2010-11-14-css-gradients-quick-tutorial.markdown
  26. +285 −0 _posts/2010-11-17-google-font-api-and-typekit-solutions-vs-font-face.markdown
  27. +107 −0 _posts/2010-11-22-how-to-fix-wrapping-text-around-floated-elements.markdown
  28. +319 −0 _posts/2010-11-28-useful-css-snippets-to-save-your-time.markdown
  29. +219 −0 _posts/2010-12-06-feature-table-design-with-css3.markdown
  30. +99 −0 _posts/2010-12-13-10-outstanding-css3-animation-demos.markdown
  31. +171 −0 _posts/2010-12-20-get-to-know-your-css3-target-pseudo-class.markdown
  32. +293 −0 _posts/2010-12-27-happy-holidays-with-css3.markdown
  33. +155 −0 _posts/2011-01-06-multi-column-text-using-css3.markdown
  34. +108 −0 _posts/2011-01-17-html5-canvas-awesomeness-games-roundup.markdown
  35. +154 −0 _posts/2011-01-19-html5-logo-using-css3.markdown
  36. +135 −0 _posts/2011-01-27-css3-webkit-gradient-support-updated.markdown
  37. +283 −0 _posts/2011-02-01-cross-browser-css-gradient-buttons.markdown
  38. +139 −0 _posts/2011-02-08-useful-online-tools-for-web-developers-and-designers.markdown
  39. +23 −0 _posts/2011-02-13-css3-love.markdown
  40. +331 −0 _posts/2011-02-18-how-to-create-a-cool-and-usable-css3-search-box.markdown
  41. +123 −0 _posts/2011-03-01-inset-box-shadow-behavior-on-chrome-beta.markdown
  42. +356 −0 _posts/2011-03-17-css3-dropdown-menu.markdown
  43. +160 −0 _posts/2011-04-06-css-ribbons.markdown
  44. +258 −0 _posts/2011-04-17-how-to-create-slick-effects-with-css3-box-shadow.markdown
  45. +66 −0 _posts/2011-04-23-dribbble-invite.markdown
  46. +133 −0 _posts/2011-04-25-how-to-solve-common-ie-bugs.markdown
  47. +199 −0 _posts/2011-04-27-css3-tooltips.markdown
  48. +65 −0 _posts/2011-05-09-before-after-pseudo-elements.markdown
  49. +310 −0 _posts/2011-05-16-html5-css3-envelope-contact-form.markdown
  50. +240 −0 _posts/2011-06-01-css3-accordion.markdown
  51. +250 −0 _posts/2011-06-20-sexy-css3-menu.markdown
  52. +307 −0 _posts/2011-07-05-cool-notification-messages-with-css3-jquery.markdown
  53. +596 −0 _posts/2011-08-08-create-a-stylish-html5-template-from-scratch.markdown
  54. +173 −0 _posts/2011-08-28-clearing-floats-nowadays.markdown
  55. +366 −0 _posts/2011-09-04-just-another-awesome-css3-buttons.markdown
  56. +243 −0 _posts/2011-09-18-slick-login-form-with-html5-css3.markdown
  57. +234 −0 _posts/2011-09-26-css3-tabs-with-beveled-corners.markdown
  58. +231 −0 _posts/2011-10-03-practical-css3-tables-with-rounded-corners.markdown
  59. +185 −0 _posts/2011-10-09-cool-css3-navigation-menu.markdown
  60. +326 −0 _posts/2011-10-16-image-map-with-css3-jquery-tooltips.markdown
  61. +317 −0 _posts/2011-10-31-simple-and-effective-dropdown-login-box.markdown
  62. +225 −0 _posts/2011-11-08-design-a-beautiful-css3-search-form.markdown
  63. +559 −0 _posts/2011-11-14-css3-animated-dropdown-menu.markdown
  64. +314 −0 _posts/2011-11-23-stylish-css3-progress-bars.markdown
  65. +207 −0 _posts/2011-11-29-easy-css3-jquery-tooltips.markdown
  66. +306 −0 _posts/2011-12-12-css3-pricing-table.markdown
  67. +124 −0 _posts/2011-12-20-meet-the-css4-selectors.markdown
  68. +225 −0 _posts/2011-12-27-awesome-css3-animated-header.markdown
  69. +104 −0 _posts/2011-12-31-rtds-top-10-most-read-articles-of-2011.markdown
  70. +244 −0 _posts/2012-01-09-just-another-css3-menu.markdown
  71. +269 −0 _posts/2012-01-16-cool-headings-with-pseudo-elements.markdown
  72. +432 −0 _posts/2012-01-24-css3-breadcrumbs.markdown
  73. +218 −0 _posts/2012-01-31-css3-jquery-folder-tabs.markdown
  74. +295 −0 _posts/2012-02-13-css3-ordered-list-styles.markdown
  75. +297 −0 _posts/2012-02-20-fancy-faq-page-using-css3-only.markdown
  76. +278 −0 _posts/2012-02-29-css-pitfalls-and-how-to-overcome-them.markdown
  77. +261 −0 _posts/2012-03-12-css3-signup-form.markdown
  78. +140 −0 _posts/2012-03-26-css3-loading-animation-experiment.markdown
  79. +134 −0 _posts/2012-04-11-css-variables.markdown
  80. +521 −0 _posts/2012-04-23-interactive-menu-with-css3-jquery.markdown
  81. +132 −0 _posts/2012-05-02-css-filter-effects-in-action.markdown
  82. +223 −0 _posts/2012-05-21-google-play-minimal-tabs-with-css3-jquery.markdown
  83. +176 −0 _posts/2012-05-28-css-parent-selector.markdown
  84. +499 −0 _posts/2012-06-20-css-generated-content-replaced-elements.markdown
  85. +140 −0 _posts/2012-06-26-notification-bubble-css3-keyframe-animation.markdown
  86. +78 −0 _posts/2012-07-09-new-responsive-design-for-rtd.markdown
  87. +320 −0 _posts/2012-07-17-designing-an-effective-pricing-table.markdown
  88. +134 −0 _posts/2012-07-23-firefox-doesnt-allow-cross-domain-fonts-by-default.markdown
  89. +129 −0 _posts/2012-08-08-faking-transitions-on-gradients.markdown
  90. +324 −0 _posts/2012-09-10-how-to-create-triangle-shapes.markdown
  91. +453 −0 _posts/2012-09-17-css3-patterned-buttons.markdown
  92. +193 −0 _posts/2012-10-29-css3-tucked-corners.markdown
  93. +164 −0 _posts/2012-12-10-css-diagonal-borders-still-not-rendering-properly-on-firefox.markdown
  94. +140 −0 _posts/2012-12-17-tips-and-tricks-on-sublime-text-2-your-favorite-code-editor.markdown
  95. +157 −0 _posts/2012-12-27-thank-you-2012.markdown
  96. +208 −0 _posts/2013-01-07-things-you-may-not-have-known-about-html-css.markdown
  97. +358 −0 _posts/2013-01-28-css-3d-folding-list-with-social-buttons.markdown
  98. +207 −0 _posts/2013-02-25-animenu-a-responsive-dropdown-navigation-made-with-sass.markdown
  99. +91 −0 _posts/2013-03-07-horizontal-centering-using-css-fit-content-value.markdown
  100. +124 −0 _posts/2013-04-08-becoming-a-better-developer.markdown
  101. +103 −0 _posts/2013-04-29-removing-an-element-with-plain-javascript-remove-method.markdown
  102. +34 −0 _posts/2013-05-13-dribbble-invites-giveaway.markdown
  103. +360 −0 _posts/2013-07-01-making-html-dropdowns-not-suck.markdown
  104. +247 −0 _posts/2013-07-29-dropdown-menu-concept.markdown
  105. +111 −0 _posts/2013-09-16-position-sticky-might-be-the-next-best-thing.markdown
  106. +195 −0 _posts/2013-12-09-beginner-javascript-gotchas.markdown
  107. +24 −0 _posts/2013-12-28-welcome-to-jekyll.markdown
  108. +160 −0 css/main.css
  109. 0 css/syntax.css
  110. +13 −0 index.html
@@ -0,0 +1,2 @@
_site
rtd.sublime*
@@ -0,0 +1,5 @@
name: RedTeamDesign
markdown: redcarpet
pygments: true
permalink: /:title
exclude: [rtd.sublime-project, rtd.sublime-workspace]
@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ page.title }}</title>
<meta name="viewport" content="width=device-width">

<!-- syntax highlighting CSS -->
<link rel="stylesheet" href="/css/syntax.css">

<!-- Custom CSS -->
<link rel="stylesheet" href="/css/main.css">

</head>
<body>

<div class="site">
<div class="header">
<h1 class="title"><a href="/">{{ site.name }}</a></h1>
<a class="extra" href="/">home</a>
</div>

{{ content }}

<div class="footer">
<div class="contact">
<p>
Your Name<br />
What You Are<br />
you@example.com
</p>
</div>
<div class="contact">
<p>
<a href="https://github.com/yourusername">github.com/yourusername</a><br />
<a href="https://twitter.com/yourusername">twitter.com/yourusername</a><br />
</p>
</div>
</div>
</div>

</body>
</html>
@@ -0,0 +1,9 @@
---
layout: default
---
<h2>{{ page.title }}</h2>
<p class="meta">{{ page.date | date_to_string }}</p>

<div class="post">
{{ content }}
</div>
@@ -0,0 +1,19 @@
---
author: Red
comments: true
date: 2009-09-20 13:15:10+00:00
layout: post
slug: css-tips-and-tricks
title: CSS tips and tricks, tutorials, templates
wordpress_id: 3
categories:
- Miscellaneous
---

What Red Team Design is about?

Red Team Design blog will offer intuitive and comprehensive tutorials, tips and tricks articles and templates design guidelines. The blog will be kept fresh with articles about CSS and web design. From time to time we will design templates and make available for our readers their sources.
<!-- more -->
Reading our blog you will learn how to become a better web designer and create stunning websites.

Subscribe for free to our [RSS Feed](http://feeds.feedburner.com/redteamdesign) updates to make sure you read the latest articles as soon as they are published.
@@ -0,0 +1,101 @@
---
author: Red
comments: true
date: 2009-09-24 21:22:12+00:00
layout: post
slug: create-a-cool-wallpaper
title: Create a cool wallpaper
wordpress_id: 23
categories:
- Miscellaneous
tags:
- design
---

This is my first tutorial for you here at red-team-design.com. For my first tutorial I decided to show you how to create a cool neon-effect wallpaper  in just couple steps using Adobe Photoshop and a little patience.

[![](http://www.red-team-design.com/wp-content/uploads/2009/09/neon-wallpaper.jpg)](http://www.red-team-design.com/create-a-cool-wallpaper/)

<!-- more -->

But let's start with the first things first. The first thing you must do before being able to create your wallpaper is to create a new Photoshop  file (you can use CTRL+N shortcut) and name it as you wish (I chosen "Wallpaper" ):

![new](http://www.red-team-design.com/wp-content/uploads/2009/09/new.png)

After you will do that , by using right-click on the background layer from the layers palette , choose "Layer From Background" to unlock it.

![layer-from-background](http://www.red-team-design.com/wp-content/uploads/2009/09/layer-from-background.png)

Now we've done this step just fill the layer with radial gradient using these colors:

![fill](http://www.red-team-design.com/wp-content/uploads/2009/09/fill1.png)

Please note that you are free to use any colors you like, but using these ones you will achieve the same result as mine.So now you should have something like this:

![background](http://www.red-team-design.com/wp-content/uploads/2009/09/background.png)

For the next step create a new layer from the layers palette and fill it with #00b6eb, then(with this layer selected) go to Filter->Render and select  Lighting Effects. Here you can leave the defaults settings like I did or you can play with setting until you achieve something interesting. Set the layer blending to "Overlay" and reduce its opacity to 40%.

![overlay](http://www.red-team-design.com/wp-content/uploads/2009/09/overlay.png)

![lighting](http://www.red-team-design.com/wp-content/uploads/2009/09/lighting.png)

Now it's the part where we add our layers that define the wallpaper. Using the pen tool from the left toolbox start creating a shape like the one bellow:

![first-shape](http://www.red-team-design.com/wp-content/uploads/2009/09/first-shape.png)

If you are encountering any problems with creating this shape you can always check some [tutorials ](http://www.melissaclifton.com/tutorial-pentool.html)with the [Pen Tool](http://psd.tutsplus.com/tutorials/tools-tips/photoshops-pen-tool-the-comprehensive-guide/).

Now that we have this layer we can edit its Blending Options by adding a linear gradient from left to right (-180 degrees angle) and an outer glow:

![styles](http://www.red-team-design.com/wp-content/uploads/2009/09/styles.png)

At this point, using the Pen Tool we'll make a neon-glossy effect  by adding one one more layers filled with white(#ffffff) color and 75% opacity:

![glossy](http://www.red-team-design.com/wp-content/uploads/2009/09/glossy.png)

If you've done all steps your Layers Palette should look like this now:

![layers](http://www.red-team-design.com/wp-content/uploads/2009/09/layers.png)

Duplicate the blue shape layer, and now that we have 2 of a kind select the one under and right-click on it to "Clear Layer Style". Now that we have no blending style applied select Filer->Blur->Gaussian Blur and we will have something like this:

![blur](http://www.red-team-design.com/wp-content/uploads/2009/09/blur.png)

![first-layer](http://www.red-team-design.com/wp-content/uploads/2009/09/first-layer.png)

Next step is adding a nice glowing effect using Pen Tool again and [Stroke Path](http://graphicssoft.about.com/cs/photoshop/ht/apsdotlinepath.htm) this time. First,  the default setting for Pen Tool is to create shapes, this time we will use it to create a path, so you have to select "Paths "  as shown:

![pen](http://www.red-team-design.com/wp-content/uploads/2009/09/pen.png)

Create a new layer,  click on the spot where you want to start the path and to create "round" path click and drag for the next anchor point:

![start-path](http://www.red-team-design.com/wp-content/uploads/2009/09/start-path.png)

Continue doing this until your path will look like this:

![full-path](http://www.red-team-design.com/wp-content/uploads/2009/09/full-path.png)

Select the Brush Tool from the left toolbox and then open the Brush Panel to modify some settings for our brush:

![brush-settings](http://www.red-team-design.com/wp-content/uploads/2009/09/brush-settings.png)

Now you've done all this choose #3aceff color as foreground color and assure you have made the right settings in the Brush Panel: Shape Dynamics and Scattering-these are very important for this step.

If all settings are as in the previous image, select Pen Tool,  right-click on the path you made ,  Stroke Path and check Simulate Pressure box. The result should look like this:

![stroke-path](http://www.red-team-design.com/wp-content/uploads/2009/09/stroke-path.png)

You can now repeat the steps and add extra layers and effects. For this tutorial I continued  to add a green one and a white one:

![all-colors](http://www.red-team-design.com/wp-content/uploads/2009/09/all-colors.png)

For the final touch you can add some stars using custom shape tool. Use a soft rounded 1500px brush to add some green neon  color to background.

![final](http://www.red-team-design.com/wp-content/uploads/2009/09/final.jpg)



[Download wallpaper](http://www.red-team-design.com/wp-content/uploads/2009/09/Neon-wallpaper.zip)

This is the final result of our work. I hope you like it and please feel free to add any comments you may have.
@@ -0,0 +1,99 @@
---
author: Red
comments: true
date: 2009-10-23 21:34:55+00:00
layout: post
slug: style-an-input-button
title: 'Here’s a quick way to style an input button '
wordpress_id: 103
categories:
- CSS
tags:
- CSS
- design
---

I assume there was at least one time when you wanted to add more appeal to a html input and at that moment you didn't knew how.
We all know how boring looks an input when we use it without styling it and that's why today I will show you the way to get rid of this old-style input.

[![](http://www.red-team-design.com/wp-content/uploads/2009/10/style-button-input.png)](http://www.red-team-design.com/style-an-input-button/)

<!-- more -->

For the beginning here is how a non-styled input looks like:










When styling and input button, we have two alternatives, to style it using only CSS with pout a background image, or using a custom background image.




### 1.Use only css without background image


First add a class or an id to your button. For this tutorial we will add an id because we do not intend to use this kind of button several times into a page:

Now let's add some styles for the id:



#btn
{
border: 1px solid #777777;
background: #6e9e2d;
color: white;
font: bold 11px 'Trebuchet MS';
padding: 4px;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}



The final result looks like this:

![test-button-1](http://www.red-team-design.com/wp-content/uploads/2009/10/test-button-1.png)

Please note that [border-radius](http://www.css3.info/preview/rounded-border/) actually is working only on Mozilla/Firefox, Google Chrome and Safari 3.


### 2.Use a custom background image


Start by creating a new .psd file with 78x28px size. From the left panel choose "Rounded Rectangle Tool" (ALT+U for Windows Users) and set a 4px radius.Fill it with #6e9e2d (green) color and apply some effects.

This is my result and also this is the **[Photoshop source file](http://www.red-team-design.com/wp-content/uploads/2009/10/btn.psd)** (please use it as you wish).



[Download Photoshop FREE source file](http://www.red-team-design.com/wp-content/uploads/2009/10/btn.psd)

![test-button-2](http://www.red-team-design.com/wp-content/uploads/2009/10/test-button-2.png)

Now, back to our code ....this image is 78x28px and we will use it as background image for our input.Here you have the new css code for it.
Note that this time you don't need to use the value attribute anymore.



#btn
{
background: url(test-button-2.png);
cursor: pointer;
width: 78px;
height: 28px;
display: block;
border: none;
}



That's it, i hope you'll find it useful!
@@ -0,0 +1,106 @@
---
author: Red
comments: true
date: 2009-11-01 23:01:52+00:00
layout: post
slug: 3d-typography-effect
title: How to create 3D typography effect using Extrude&Bevel
wordpress_id: 149
categories:
- Miscellaneous
tags:
- design
---

In this tutorial you will learn how to achieve the following fancy 3D typography effect using Adobe Illustrator and Adobe Photoshop in just 7 easy steps.

[![](http://www.red-team-design.com/wp-content/uploads/2009/11/3d-typography-effect.png)](http://www.red-team-design.com/3d-typography-effect/)

<!-- more -->


### 1.Open Adobe Illustrator and create a new .ai file:


![new](http://www.red-team-design.com/wp-content/uploads/2009/11/new.png)


### 2.Select the Type Tool(T) and add the "red" text using these settings and the #B3B3B3 color:


![text-settings](http://www.red-team-design.com/wp-content/uploads/2009/11/text-settings.png)

If you don't see the Type window you can bring it to front using the top menu: Window > Type > Character.

This is the result you must achieve. Please note the reduced spacing between the letters.

![red](http://www.red-team-design.com/wp-content/uploads/2009/11/red.png)

To continue customizing this text, right-click on it and select "Create Outlines" to transform the text into editable shapes.

![red-outline](http://www.red-team-design.com/wp-content/uploads/2009/11/red-outline.png)


### 3.Customize the text


First, create a new shape using the Rectangle Tool (M) like in the following example:

![red-shape](http://www.red-team-design.com/wp-content/uploads/2009/11/red-shape.png)

Now with the Pathfinder window activated (Shift+Ctrl+F9 or Window > Pathfinder), select the new square shape and the "e" shape from the "red" text and click on "Minus Front" as showed:

![minus-shape](http://www.red-team-design.com/wp-content/uploads/2009/11/minus-shape.png)

The result after we use the Pathfinder will look like this:

![red-custom](http://www.red-team-design.com/wp-content/uploads/2009/11/red-custom.png)


### 4.Add the "design" text


Note that the type settings are the same as i used for the "red" text, just that in this case the letters are capitalized.

![red-design](http://www.red-team-design.com/wp-content/uploads/2009/11/red-design.png)


### 5.Use the Pathfinder again


Use it as shown earlier to "cut" the "red" text and make it look like this:

![red-design-2](http://www.red-team-design.com/wp-content/uploads/2009/11/red-design-2.png)


### 6.3D Extrude&Bevel


With the "DESIGN" text selected from our layer pallete go to Effects > 3D > Extrude&Bevel and apply these settings:
![3d](http://www.red-team-design.com/wp-content/uploads/2009/11/3d.png)

![3dresult](http://www.red-team-design.com/wp-content/uploads/2009/11/3dresult.png)


### 7.Stylize with Adobe Photoshop


Export the content as .png and open it with Adobe Photoshop. You need now to create custom shapes to add lights and shadows to the design. To do that just select the Pen tool (P) from the left menu and start creating shapes as shown.Select the #ffffff(white) color as background and reduce its opacity to, let's say, 20%.

![lights](http://www.red-team-design.com/wp-content/uploads/2009/11/lights.png)

This should be the result after adding lights:

![typographic-effect-lights](http://www.red-team-design.com/wp-content/uploads/2009/11/typographic-effect-lights.png)

Plus some shadows:

![typographic-effect-shaddow](http://www.red-team-design.com/wp-content/uploads/2009/11/typographic-effect-shaddow.png)

I hope you enjoyed this tutorial. Below you can find the final result.



[Download source files](http://www.red-team-design.com/wp-content/uploads/2009/11/typographic-effect.rar)

![typographic-effect-final](http://www.red-team-design.com/wp-content/uploads/2009/11/typographic-effect-final.png)
Oops, something went wrong.

0 comments on commit 5222844

Please sign in to comment.
You can’t perform that action at this time.