Advanced CSS Selectors
In CSS, there are the basic stylings for all the essential elements of a page. Body, heading tags, paragraph tags, and so forth. As it gets more advanced, you can create specific blocks for different elements on the website using CSS to style elements within each block accordingly. In going even further, you can use a number of advanced selectors to style your website with the most control you could ever need. In this post, we will look at a few of these advanced selectors.
first-letter
The first-letter selector is something rarely seen, but it has many applicable uses. For example, what if you wanted to give the first letter of a heading tag more prominence, or wanted to give the first letter of a paragraph tag an underline? Now you can! For example:
h1 {font-size:25px;}
h1:first-letter {font-size:40px;}
Now the first letter of the Heading 1 tag will have a font size of 40 pixels, while the rest of the heading will have a font size of 25 pixels. Continue reading →
Creating Vector Portraits
Portraiture is something done in all mediums, each with their own benefits that can help you achieve a certain aesthetic. There’s no right way to go about creating your image, this is just a brief walkthrough of how I create my own work.
- Step 1. I start with a reference photograph that I will “trace” around and sample the colors of shapes (called objects in Illustrator) from that image.
- Step 2. Then I do solid colors of hair, skin and clothes.
- Step 3. Usually I’ll complete the eyes (and teeth if applicable) all at once, group them together and leave them on their own layer.
- Step 4. I Add the light and dark tones and shades according to areas of value from the reference photograph.
- Step 5. Then add the lighter and darker tones and shades according to values to help refine detail and shape.
- Step 6. I often put in hints of a darker shade in to create finer detail where the darkest shade for that area doesn’t push it back enough.
- Step 7. Repeat the process for facial hair, earrings and whatever extras there may be. Normally I leave the clothes till last and keep them very simple.
-
- Step 1
-
- Step 2
-
- Step 3
-
- Step 4
-
- Step 5
-
- Step 6
Essential Elements of a Website
So you have a business and want a new website, but you don’t know where to begin. In this brief tutorial, you can get the idea of how to start planning for your website and what to expect.
First things first
The first part involved in planning for your website is to think about what your site navigation will be. This list will be the backbone of your website. A good starting point is to think about what pages and information you want to share with your users.
Surely you need a home page, which will be the main page on your website and ideally is used to summarize what your business has to offer. An About page may be required if you have a long history that you wish to share with your users (if it is a short biography, though, you may simply be able to incorporate it in the home page). A Contact page will be necessary so your users and clients can find out how to contact you. But what else? Some other pages that you may desire or require can include:
- A photo gallery page
- A video page
- A services page
- A portfolio page
- A team page
Secondary thoughts
Another important thing to think about is a logo. Do you have one? If you do, do you have the Vector file (in .EPS or .AI format)? If you have the vector files of your logo, that will immensely help the designer for your website. If not, it may be necessary to create (or recreate) one. Your logo is how clients will identity your business and vector files are scalable, which will help the designer in creating your website. Some web design businesses employ skilled graphic designers who can help create a logo and branding if needed.
Continue reading →
Cross-Browser Compatibility
Generally while developing a website, using clears and floats requires very little cross-browser tweaking. Sometimes; however, if you are trying to overlap objects, images, or using pixel specific placements, your website can look a bit off depending on the browser that you are using. Here are 3 ways to allow you to make your website to look the same (or close to the same) across all browsers.
Conditional CSS
Conditional CSS is without a doubt my favourite cross-browser compatibility utility. It allows you, with the help of a generated PHP file, to condense all your cross-browser stylesheets into one single CSS file. Once you declare the PHP file from your index file accordingly, you only have to specify the browser using a tag followed by the style to give it specific styles for that brwoser. For example:
Global style:
#container {background:#000;}
If less than or equal to:
[if lte IE 8] #container {background:#CCC;}
If is not:
[if ! Opera] #container {background:#666;}
Getting started:
- Head over to www.conditional-css.com
- Select which server platform you use (PHP4, PHP5, C# or C.) Usually PHP5 is acceptable.
- Add your CSS file (from your web server) to the upload menu on the right hand side of the website and click Go!
- You will be given a file, c-css.php, to upload to your website.
- Call the c-css.php file from your index file using the following: @import “/path/c-css.php”;
- You can remove your CSS file declaration provided c-css.php has an accurate location of the CSS file (this avoids calling the CSS file twice.)
That’s it, you can now use tags, such as the ones stated in the above example. For a list of more browsers you can configure for, head to: http://www.conditional-css.com/usage. Continue reading →
Inspiration & Resources for Designers
Every once in a while, as I’m sure is the case for many designers, I find myself struggling for inspiration. Depending on the project and whether or not a mockup is needed, sometimes it helps me to code out a basic layout structure in HTML and CSS and then I start getting some ideas for the actual design. Whether that works or not, I eventually have to actually start designing at some point.
Here are a couple of things that help get my creative juices flowing. (Although, I am thinking more in the area of designing for websites, these can also be helpful for designing for other projects as well.) Continue reading →
5 Quick WordPress Tricks
WordPress offers more functionality now than ever. It is evolving to the point that your website does not even need to be a blog to utilize its powerful functionality. Here are 5 simple tricks to give you a little added functionality to your website.
Displaying different information based on category
Anyone who is familiar with WordPress knows that it can be used to categorize your blog posts, but what if you wanted to take that one step further to display certain information based on the category chosen? For example, imagine your website was to display a list of used cars from many different dealerships around town and you wanted to give your readers the dealership information based on vehicle they have chosen to view. Using WordPress’s in_category function, you can!
To start, navigate to the page you want to display your category-specific information in and simply use the following syntax with your modifications:
<?php if (in_category(‘First Category’)) { ?>
Title<br />
Address<br />
Phone Number<br />
Website
<?php } elseif (in_category(‘Second Category’)) { ?>
Title<br />
Address<br />
Phone Number<br />
Website
<?php } ?>
And you’re done! Based on which category you choose when creating a blog post in WordPress, the correct information will be displayed.
Best Current Examples of HTML5 Tech
With HTML5 almost fully supported by all modern browsers, people have been delving into software development full-force especially with all the anti-Flash controversy going on. This has lead to some really interesting technologies emerging in full-non-flash goodness, relatively quick (even though HTML5 can still be buggy cross-platform/cross-browser).
Aviary
Aviary, known for their very complex and robust online flash-based photo editor has recently released a HTML5 photo editor. It’s a simplified version of course, but impressive nevertheless; normally people use these online tools to do a quick touch-up when they don’t have access to Photoshop. I would try this one in the latest Chrome/Safari for the best results.
http://www.aviary.com/html5editor
4 Simple and Useful PHP Snippets
PHP is a server-side scripting language that was developed to create dynamic websites. In recent years, as content management systems such as Joomla!, WordPress, and Drupal are becoming more and more prevalent, PHP has since become the backbone of the web. Listed below are a few PHP snippets that can be of use to any website. Continue reading →
The Top 3 Social Networking Services for Businesses
Social networking has gone past the “buzzword” phase and entered into the “necessary tools” phase for any business, large or small. Fortunately for us with smaller budgets, the top three social networking tools are also completely free. In this comparison, we are using “numbers” as an indication of the top three services you should focus on for promotion of your business, website, or even an event. Numbers, as I referenced, are the amount of people and traffic you can get from the services to see what you are promoting. Continue reading →
My Favourite CSS3 Properties
CSS3 (Cascading Style Sheets – version 3) is well on its way for full cross-browser support, well, you know, besides Internet Explorer, to much dismay of the web development world. There is some hope though, according to Microsoft, Internet Explorer 9 will have CSS3 support. Still, there’s no reason not to use CSS3 in your web design because these effects degrade nicely for all non-supported browser. By degrade nicely, I mean, they basically do not render them at all, so depending on how you implement them, non-supported users will just see the website “less pretty”. Continue reading →
← Older posts
Facebook
Twitter
LinkedIn
Google+
Shop The Hat
Medicine Hat Menus
Crewpon