1stwebdesigner

---

2015 Is For Web Design Professionals Posted: 08 Jan 2015 02:53 AM PST “Here’s to becoming even better this year.” James Richman Year 2015 Will Be Fun Some are full of excitement after receiving their new gym membership. While some committed to quit unhealthy habits, and others have made a promise to themselves to spend more time with their loved ones. All in all, it's that time of the year again when everyone is full of enthusiasm to welcome change in their lives. I hope that you too are full of enthusiasm to really #deliver big time in 2015. We at 1stWebDesigner, are certainly enthusiastic but most of all we want to do it together with you. Cheers to a new year and another chance for us to get it right. by Oprah Winfrey Click To Tweet In 2014, we had many set backs, failures and falls. It did hurt, but have brought learned lessons, new ideas and enthusiasm. So that you will benefit from the best possible value our community has to offer. 1. The Power of Community Our team’s biggest commitment and determination this year is to earn your trust and respect as well as establish our credibility as The Community of Web Design Professionals. I've noticed how most of our every day human interactions are based on vertical management hierarchy structure which is sometimes called as "tall organization". To be blunt, I hate it because it's always about having someone "higher” or “lower” than you – someone is always looked up to and someone is always looked down to. I'm afraid however, that this is the reality of our society today. Vertical management hierarchy structure. © IAD When charted out on paper, a vertical management hierarchy structure looks exactly like a pyramid where the head of the company occupies the top level followed by a series of middle managers and supervisors who are responsible for various departments. Finally, at the bottom level of the pyramid so called “regular” employees. Enough of this since you most probably got the idea already. I’d rather focus on the idea that within our society today exist communities. Communities which are mainly based on the horizontal management hierarchy structure, sometimes called as “flat organization”. The flat organizational model encourages employees to become more intimate in conversations with each other and customers. It also promotes employee involvement through a decentralized decision-making process. By getting rid of the idea of someone being "higher" or "lower" all personnel involved are informed no matter what type of communication is used. This is what exactly describes community the best: Intimate, rapid, informal and social. To keep it more simple. Horizontal (community) management structure. © Verve Community is a group of people, who hold the same interests, hobbies, passion, beliefs, and values. It is really not about who is better or higher than the other because each of us has his own areas of expertise and experience. It means that there are certain topics I have been more exposed to, hence know more about it than you do and the same way goes for you. Therefore, there is no inequality. Now, you understand why it wasn't a hard decision to become the community for you. We love web design and you love web design. Just like you, we also are web design professionals who want to level up our business to become faster, more efficient, more productive, more cost effective and more credible. 2. Web Design Professionals As my partner Dainis already mentioned in his article, “2015 will be focused on crafting articles of a much higher quality". I will be writing articles myself, based on our every day growing web design experience. Let's slow down and dive into every part of improvement you will experience this year. Aside from our new video project, #EspressoMonday, we will have a more personalized and individual communication, new partners, new content direction, and all the way to the most minor details of our community this year. 2.1 Personalized Communication We all like authentic communications and genuine intentions. We trust humans.  We want to talk to humans. We want to engage with humans. After all, we can only give any kind of credibility, respect, or authority only to a human being. If you love WordPress, are totally committed to reading every CSS-Tricks article, are eager to buy the next Smashing Magazine's book, or have read nearly every one of Spoon Graphic's tutorials, you most probably know the truth by now. WordPress without Matt just wouldn't be the same. CSS-Tricks without Chris just wouldn’t do the tricks. No Vitaly means no Smashing Magazine, and of course, there would be Graphics, but no spoon without Chris. Here are few more real-life hustlers who take personalization seriously. And remember – face over logo, always. Because of this, I too decided to step forward and use a picture of myself every time we connect and communicate with you. This also includes the insights of what anyone from our team is up to. 2.2 #EspressoMonday Video Project As we decided how to implement a more individualized engagement in our commitment to the community this year, we opted for Question and Answer video sessions we call #EspressoMonday. Here’s the reason why… This weekly Q&A show will be published every Monday and as the title of the show suggests, it is indeed powered by a good doze of caffeine. Just that, no BS but the basics – coffee, web design and community. Before watching the show, however, please get a cup of coffee for yourself, too. In our very first episode I talk about WordPress frameworks, price increase for your services and starting an agency. Watch the episode #1 of our Q&A show #EspressoMonday All you have to do is just ask your web design question to me followed by the hashtag #EspressoMonday. You can also ask your question on our YouTube, Facebook, Twitter, Google+, and Instagram accounts or anywhere else you can find us. You can even feel free to shoot me an email to james@1stwebdesigner.com 2.3 Web Design Links Linklog is a blog which is a collection of URLs (hyperlinks) that the blog’s maintainer considers interesting enough to collect. That's how Wikipedia would describe our new section (look top menu). We just call it Web Design Links, though. These publicly curated lists of useful resources and links, a format first popularized by John’s Daring Fireball list, have again gained a good amount of popularity in recent months. Example of our last web design links. Now web design professionals too, are creating some great linklogs: like Sacha's Sidebar and WPClipboard. Since I read a lot on web design every day, I decided I'll share my very best findings every single day with no promotional, sponsored, or advertisement links – just my hand-picked golden nuggets. 2.4 New Content Direction Now, we're finally returning to the topic of changing the direction of the content we will be putting out there for you. On a daily basis, we create different complexity web design projects because clients and requirements vary. In turn so does the output of our efforts. This has led us to an understanding – the importance of making development to these projects to make them efficient, cost effective, and impactful as we possibly can. I'm glad that this has been one of the best decisions we've made. Once again, we have decided to share all of these learnings, experiences, solutions and ideas with you. In short, our main content categories from now on will be based around Design, Business, and WordPress. a) Design Do not expect to find yet another list post of inspirational wallpapers, top minimalistic logo collections or Photoshop brush freebies in this content category because there are plenty of great web resources out there who offer just that. Instead, this section will be filled with analytical materials where design will be analyzed from different types of angles and, concepts. It's time to pay more attention to the cruciality of design being functional and, not just pleasant to one's eye. HSBC Design Methodology. © HSBC Our mission is for our community to begin thinking of design as an individual discipline when developing web design projects. With these publications, we do not intend to fill you in with the latest web design trends. The reason for this again is that, there are enough brilliant quality resources which, exactly serve this purpose. On the other hand, we want you to have a clear understanding of design standards and, awareness of usability fundamentals as well as, be up to date with web accessibility guidelines. b) Business We are exposed to so much information about how to become a freelancer and maintain a freelancing career. Unfortunately, there is not nowhere near as much resources that would help web design professionals understand the business side of this industry. This category is dedicated to help our community of web design professionals understand the best industry practices of creating, planning, and handling all web design project in all levels of development. Agile methodology process overview © DWV As well as the entire deployment case studies of our own web design projects. That being said, our main mission with this type of content is for you to thoroughly understand the ins and outs of how to establish best partnerships with clients and, creatives by getting any project from A to Z. You can also expect analytical materials about such web development methodologies as Waterfall, Prince 2, Agile, Scrum, Lean, PMI and others. c) WordPress Lastly, it would be unforgivable to leave out WordPress because over the past years of being professionally involved in the web design industry, WordPress has become our "top gun". In the eyes of many other professionals this is the tool that has become the backbone, the spine and the whole core of web design industry. We are so in love with it, that it has earned its own content category and that says it all. If you are still one of the rare industry representatives who are not aware of the endless benefits of using WordPress just check out this crazy social proof. 80 Million websites powered by WordPress. 2.5 Premium Products Everyone who is professionally involved in this industry or for that matter any other industry must have the business growth mindset which basically translates into: "In order to earn I have to spend." Every successful person will tell you that in order to grow their business and earn, they also had to spend money. They had to invest either in their education, tools, solutions, contacts or assets. Invest in yourself. Your career is the engine of your wealth. by Paul Clitheroe Click To Tweet We are very upfront about the fact that we, just like you, are here to run a business. We are not a charitable organization. Therefore, it shouldn't come as a surprise that we promote and will keep on promoting premium products for web design professionals. To get this whole thing right, we have partnered with the best authorities in the niche they represent so we can fully focus on being here with you and become better web design professionals together. Our partners include business product creators, top rated WordPress development brands, award winning designers, and others. 3. Join Our New Community Lastly, let me finish this article by telling you that our previous ways of communicating with you via email has changed, too. We no longer use MailChimp nor are we going to send out newsletters, which a lot of you in the  past have called spammy (I don’t blame you). From now on, I’ll be sending you a very personal email letter only once a week. However, in order to join our new list and be a part of this community, you have to say “YES” to it by entering your email  below.

You are subscribed to email updates from The Community of Web Design Professionals - 1stWebDesigner To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States

Introduction to CSS Colors - Six Revisions

---

Introduction to CSS Colors Posted: 05 Jan 2015 02:00 AM PST We’ll cover all the available methods for specifying colors with CSS in this guide. There are six ways to declare CSS colors: Hexadecimal notation RGB RGBA HSL HSLA Color keywords Hexadecimal Example div { background-color: #000000; } Result   Hexadecimal color notation is a way of declaring a color by indicating the amount of red, green and blue (RGB) it has. This color notation is based on the hexadecimal numeral system (base 16). We’re more accustomed to the decimal numeral system (base 10), so hex is a bit tricky to understand at first. In the example above, black was declared as #000000, which means it has no red, green or blue. (Color theory tells us that the absence of any color is black.) In CSS hex color notation: The amount of red is specified by the first two characters The amount of green is specified by the second two characters The amount of blue is specified by the last two characters A valid CSS hex color starts with a hash (#) followed by either six characters or three characters. Characters can be between 0-9 and A-F (or lowercase a-f). The minimum value of each color channel is 00, which is equal to 0 in the decimal numeral system. The maximum value of each color channel is FF, which is equal to 255 in the decimal numeral system. So, knowing all of that, if we specify black, then: Red Green Blue Hex color notation 00 (0 in decimal) 00 (0 in decimal) 00 (0 in decimal) #000000 What if we wanted blue? We can set the amount of blue to the maximum value (i.e. FF): Red Green Blue Hex color notation 00 (0 in decimal) 00 (0 in decimal) FF (255 in decimal) #0000FF Result   We can specify a vast amount of colors simply by adjusting the amount of red, green and blue in the color. Let’s say we wanted get the color purple. We can do this by mixing together a bit of red with a bit of blue, and by leaving out any green. Red Green Blue Hex color notation 80 (128 in decimal) 00 (0 in decimal) 80 (128 in decimal) #80080 Result   In the hex numeral system, two consecutive characters that are identical can be shortened to just one character. That’s why CSS hex color notation can also be written with just 3 characters. For example: #FF00FF is the same as #F0F #DDCC11 is the same as #DC1 #000000 is the same as #000 #FFFFFF is the same as #FFF For alphabetic characters, you can use lowercases. For example: #FFFFFF is the same as #ffffff #C0C0C0 is the same as #c0c0c0 #ABCDEF is the same as #abcdef RGB Example div { background-color: rgb(0, 0, 0); } Result   The decimal numeral system is what we’re most used to. It’s usually the system we’re taught in school, and it’s how most numbers are displayed in our world. The hexadecimal numeral system, on the other hand, isn’t mainstream; it isn’t used much outside computer programming and math-related fields. RGB color notation is a more intuitive way of declaring CSS colors because it uses the decimal numeral system. The syntax format is: rgb(red, green, blue) OK, so we already know that: 0 is the minimum decimal value 255 is the maximum decimal value Blue can be specified as: Red Green Blue RGB color notation 0 0 255 rgb(0, 0, 255) Result   RGBA Example div { color: rgba(255, 255, 255, 0.20); background: url(bg.jpg) no-repeat center center; } Result Sample Text RGBA is just an extension of RGB, with an added alpha (A) parameter that specifies the level of transparency/opacity the color has. Thus, we can use RGBA color values to make HTML elements semi-transparent. Alpha can be a value between 0 and 1. The basic format of RGBA is: rgba(red, green, blue, alpha) If we want blue with 25% opacity: Red Green Blue Opacity RGBA color notation 0 0 255 0.25 rgba(0, 0, 255, 0.25) For an in-depth discussion of RGBA, read this: A Guide to CSS RGBA Colors. HSL Example div { background-color: hsl(240, 100%, 50%); } Result   HSL stands for Hue, Saturation and Lightness. The HSL color notation is an alternative to the RGB color notation. It was introduced to CSS with the idea that it’s more intuitive to learn compared to the RGB color system. The basic syntax is: hsl(hue, saturation, lightness) Hue refers to the colors we can see. The range of colors visible to the human eye can be charted in a circle, often referred to as the color wheel. Therefore, hue can be a value between 0 and 360. source Looking at the color wheel above, we can see that red is at 0o, green is at 90o, purple is at 270o, and so forth. Saturation refers to the vividness or "colorfulness" of the hue. A low saturation value leads to a muted hue, while a high saturation value leads to a brighter hue. Saturation can be between 0% and 100%. Lightness refers to how light or dark the hue is. The higher the value, the lighter the color is. Lightness can also be a value between 0% and 100%. It’s easy to look at saturation and lightness as the fine-tuning of the hue. Let’s say we want a pure red. Looking at the color wheel again, red is at 0o. So to get pure red, we can set the saturation to 100% to get the maximum amount of red color, and lightness to 50%. Hue Saturation Lightness HSL color notation 0 100% 50% hsl(0, 100%, 50%) Result   If we wanted to have a muted/dull red, we can still use the same hue. We just need to lower the saturation to reduce the color’s vividness. Hue Saturation Lightness HSL color notation 0 50% 50% hsl(0, 50%, 50%) Result   If we want a dark red, we can lower the lightness value. Hue Saturation Lightness HSL color notation 0 100% 25% hsl(0, 100%, 25%) Result   HSLA Example div { color: hsla(120, 100%, 50%, 0.2); background: url(bg.jpg) no-repeat center center; } Result Sample Text HSLA is just like HSL with an added Alpha (A) parameter that allows us to specify the level of transparency/opacity of the color. The basic syntax is: hsla(hue, saturation, lightness, alpha) Alpha can be a value between 0 and 1. Color Keywords Example div { background-color: fuchsia; } Result   Basic Color Names CSS has 16 basic color names. Examples of basic color names are blue, maroon, black and white. Basic Color Names Chart Color Color Name Hex   black #000000   silver #C0C0C0   gray #808080   white #FFFFFF   maroon #800000   red #FF0000   purple #800080   fuchsia #FF00FF   green #008000   lime #00FF00   olive #808000   yellow #FFFF00   navy #000080   blue #0000FF   teal #008080   aqua #00FFFF source Extended Color Names CSS2 and CSS3 introduced a lot more color names. Examples of extended color names are thistle, crimson and saddlebrown. Example div { background-color: olivedrab; } Result   Extended Color Names Chart Color Color Name Hex   aliceblue #F0F8FF   antiquewhite #FAEBD7   aqua #00FFFF   aquamarine #7FFFD4   azure #F0FFFF   beige #F5F5DC   bisque #FFE4C4   black #000000   blanchedalmond #FFEBCD   blue #0000FF   blueviolet #8A2BE2   brown #A52A2A   burlywood #DEB887   cadetblue #5F9EA0   chartreuse #7FFF00   chocolate #D2691E   coral #FF7F50   cornflowerblue #6495ED   cornsilk #FFF8DC   crimson #DC143C   cyan #00FFFF   darkblue #00008B   darkcyan #008B8B   darkgoldenrod #B8860B   darkgray #A9A9A9   darkgreen #006400   darkgrey #A9A9A9   darkkhaki #BDB76B   darkmagenta #8B008B   darkolivegreen #556B2F   darkorange #FF8C00   darkorchid #9932CC   darkred #8B0000   darksalmon #E9967A   darkseagreen #8FBC8F   darkslateblue #483D8B   darkslategray #2F4F4F   darkslategrey #2F4F4F   darkturquoise #00CED1   darkviolet #9400D3   deeppink #FF1493   deepskyblue #00BFFF   dimgray #696969   dimgrey #696969   dodgerblue #1E90FF   firebrick #B22222   floralwhite #FFFAF0   forestgreen #228B22   fuchsia #FF00FF   gainsboro #DCDCDC   ghostwhite #F8F8FF   gold #FFD700   goldenrod #DAA520   gray #808080   green #008000   greenyellow #ADFF2F   grey #808080   honeydew #F0FFF0   hotpink #FF69B4   indianred #CD5C5C   indigo #4B0082   ivory #FFFFF0   khaki #F0E68C   lavender #E6E6FA   lavenderblush #FFF0F5   lawngreen #7CFC00   lemonchiffon #FFFACD   lightblue #ADD8E6   lightcoral #F08080   lightcyan #E0FFFF   lightgoldenrodyellow #FAFAD2   lightgray #D3D3D3   lightgreen #90EE90   lightgrey #D3D3D3   lightpink #FFB6C1   lightsalmon #FFA07A   lightseagreen #20B2AA   lightskyblue #87CEFA   lightslategray #778899   lightslategrey #778899   lightsteelblue #B0C4DE   lightyellow #FFFFE0   lime #00FF00   limegreen #32CD32   linen #FAF0E6   magenta #FF00FF   maroon #800000   mediumaquamarine #66CDAA   mediumblue #0000CD   mediumorchid #BA55D3   mediumpurple #9370DB   mediumseagreen #3CB371   mediumslateblue #7B68EE   mediumspringgreen #00FA9A   mediumturquoise #48D1CC   mediumvioletred #C71585   midnightblue #191970   mintcream #F5FFFA   mistyrose #FFE4E1   moccasin #FFE4B5   navajowhite #FFDEAD   navy #000080   oldlace #FDF5E6   olive #808000   olivedrab #6B8E23   orange #FFA500   orangered #FF4500   orchid #DA70D6   palegoldenrod #EEE8AA   palegreen #98FB98   paleturquoise #AFEEEE   palevioletred #DB7093   papayawhip #FFEFD5   peachpuff #FFDAB9   peru #CD853F   pink #FFC0CB   plum #DDA0DD   powderblue #B0E0E6   purple #800080   red #FF0000   rosybrown #BC8F8F   royalblue #4169E1   saddlebrown #8B4513   salmon #FA8072   sandybrown #F4A460   seagreen #2E8B57   seashell #FFF5EE   sienna #A0522D   silver #C0C0C0   skyblue #87CEEB   slateblue #6A5ACD   slategray #708090   slategrey #708090   snow #FFFAFA   springgreen #00FF7F   steelblue #4682B4   tan #D2B48C   teal #008080   thistle #D8BFD8   tomato #FF6347   turquoise #40E0D0   violet #EE82EE   wheat #F5DEB3   white #FFFFFF   whitesmoke #F5F5F5   yellow #FFFF00   yellowgreen #9ACD32 source transparent Color Keyword The transparent color keyword is simply a way to say that the color has 0% opacity. Example div { background-color: transparent; } currentColor Color Keyword The currentColor color keyword is a convenience keyword that just means the color being declared is equal to the CSS color property value: For example: div { color: blue; border: 1px solid blue; box-shadow: 2px 2px 15px blue; background: blue; } Can also be written as: div { color: blue; border: 1px solid currentColor; box-shadow: 2px 2px 15px currentColor; background: currentColor; } Result   The benefit of using the currentColor color keyword is that if you need to update a rule-set, you only need to update the color property value. Related Content A Guide to CSS RGBA Colors Color: The Next Limited Resource? Colors in Web Design: An Exploration About the Author Jacob Gube is the founder of Six Revisions and a front-end web developer. Join him on Twitter @sixrevisions and Facebook. The post Introduction to CSS Colors appeared first on Six Revisions.

You are subscribed to email updates from Six Revisions To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States

Examples of Full-Screen Background Images - Six Revisions

---

Examples of Full-Screen Background Images Posted: 02 Jan 2015 02:00 AM PST Using a big background image is a popular web design trend. If you’re considering the use of large background images in your next design project, check out these 20 beautiful sites for inspiration. Jackaroo Caravans Hermes Tocchetti TIMI IMM Illusion Magazine JustBean Pen & Quill Oven Bits Mextures Digital Telepathy Zenvala Sailing Collective Werzer’s Badehaus Cassiano Prado Noah Glushien Sophie Peckett Design Red’s True BBQ Hatch Collective David Nolan Gallery P&Co If you want to learn how to implement full-screen background images in your next project, check out my tutorial: Responsive Full Background Image Using CSS. Related Content Websites with Large Background Images: 25 Inspiring Examples Creating Responsive Images with CSS 30 Beautiful Web Designs That Use Photos as Backgrounds About the Author Jacob Gube is the founder of Six Revisions and a front-end web developer. Join him on Twitter @sixrevisions and Facebook. The post Examples of Full-Screen Background Images appeared first on Six Revisions.

You are subscribed to email updates from Six Revisions To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States