Tips and Snips: Creative Website Hacks for Creative People
ImageandAspect
Philosophy
About
Demos
Contact
Privacy
Terms
Subscribe
Tips and Snips: Creative Website Hacks for Creative People
  • ImageandAspect
  • Philosophy
  • About
  • Demos
  • Contact
  • Privacy
  • Terms
  • Subscribe
Browsing Tag
css
Bootstrap•CSS

Bootstrap CSS Classes (reference guide)

photo of Bootstrap Classes Aggregated Sheet
February 4, 2020 by Diane Metcalf, M.S.I.T. No Comments

Ever wanted to know what all the Bootstrap CSS Classes are?

Here’s a comprehensive downloadable PDF of previously published current Bootstrap CSS classes, including descriptions, that I aggregated here for quick reference.

Questions?

[email protected]

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-5 Tips to Stay Sane when Working from Home

 

About the author

diane-author-300x181 Bootstrap CSS Classes (reference guide)

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Reading time: 1 min
CSS

How to make gradient backgrounds in CSS

Photo of a Gradient Image in shades of aqua and blue
December 20, 2019 by Diane Metcalf, M.S.I.T. No Comments

Gradient backgrounds are a visually striking way to display a pleasing transition of colors.

Here’s an example of the gradient background on each of my website’s pages, with shades of aqua and purple.

Here’s how I did it:

First of all, you need to know that CSS defines two kinds of gradients:

  • Linear Gradients (down/up/left/right/diagonally)
  • Radial Gradients (defined by their center)

I’m only focusing on linear gradients in this post.

Before you create the linear gradient, you need to decide two things:

  • What colors you will use. Those are your “color stops.”
  • The starting point and direction of  your gradient. (Do you want the colors to go left-right? Up-down? Angled from corner to corner?)

TYPES OF GRADIENTS

Top to Bottom (the default)

Create a div. Inside this div, your selector will be “background” and its’ property will be “linear-gradient”. The value of “linear-gradient” will be the color stops.

I use hex values for my color stops to have more control over the exact shades. Here’s a resource for finding hex codes:

Here’s the default syntax:

#mydiv {
background: linear-gradient(blue, green);
}

It’s actually pretty straightforward, huh?

Now we can try some other kinds of transitions:

Left-right, transitioning from blue to green:

#mydiv {
background: linear-gradient(to right, blue , green);
}

Diagonally:

You can make the gradient display diagonally by indicating the horizontal and vertical starting positions:

#mydiv {
background: linear-gradient(to bottom right, blue, green);
}

Angled: (to top, to bottom, to left, to right, to bottom right, etc.)

The angle is specified by degrees between the horizontal line and the gradient line:

#mydiv {
background: linear-gradient(-90deg, blue, green);
}

Top-bottom, transitioning from blue to green to orange:

#mydiv {
background: linear-gradient(blue, green, orange);
}

My own gradient background goes left to right, and I specified that I wanted the first color to take up the first 50% of the gradient space.

Here’s my code:

background: linear-gradient(to right, #57BBBF 50% , #5798bf, #577dbf, #5759bf, #6f57bf, #9457bf, #da5cdb);

You can add transparency, by using the “rgba() function” to define the color stops. To define the amount of opacity or transparency, the last value in the function is  either a 0 or 1. (0 indicates full transparency, 1 indicates no transparency (fully opaque).

This next gradient starts from the left as fully transparent, then transitions to full opaque (non-transparent) blue:

#mydiv {
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

I hope you try some of these yourself and get creative, and have fun with them. There’s no limit to what you can do with gradients.

Questions? Contact me:

[email protected]

or

My Contact Page

Other articles you might like:

-6 Tips to Make Your Blog Post SEO Friendly

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

 

About the author

diane-author-300x181 How to make gradient backgrounds in CSS

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Reading time: 3 min
Bootstrap•CSS•HTML

The correct order for using Bootstrap tags

bootstrap logo
October 4, 2019 by Diane Metcalf, M.S.I.T. No Comments

If you notice that your page isn’t displaying properly; like maybe Bootstrap is using its’ default styles
instead of your custom css, or maybe your drop-down menu isn’t working, it could be that you need to
check the order of your Bootstrap tags.

The order of the tags is very important for your page to look and work like you want it to.

Check the head and make sure you have the meta tags correct. (The 3rd tag is necessary to display the page on mobile devices.)

<head>

<meta charset=”utf-8″>
<meta content=”IE=edge” http-equiv=”X-UA-Compatible”>
<meta content=”width=device-width, initial-scale=1″ name=”viewport”>

The above 3 meta tags must come first in the head; the other head content comes after them.

<title>Page Title Here</title>

Next is the Bootstrap core css:
<link href=”css/bootstrap.css” rel=”stylesheet”> OR
<link href=”css/bootstrap.min.css” rel=”stylesheet”>

Your own style sheets come next
<link href=”css/mystyle.css” rel=”stylesheet” />
</head>

The Bootstrap Core JavaScript files (jquery.min.js and bootstrap.js) are at the end, right before the closing body tag, so the pages will load faster.

Which Bootstrap css version should you use? It depends whether you want to be able to read it or not. Bootstrap.min.css is a mini version of bootstrap.css. All of the white space and other extra characters have been removed, to decrease the file size. This version is usually used in production. When you’re developing, it’s helpful to use the regular version because it’s legible.

Read more at https://getbootstrap.com/docs/3.3/getting-started/

Questions? Contact me:

[email protected]

or

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

 

About the author

diane-author-300x181 The correct order for using Bootstrap tags

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Reading time: 2 min
CSS•Design•HTML

6 Tips for Using Bulleted Lists for Online Content

Lists emphasize important points and help readers follow a sequence
April 5, 2018 by Diane Metcalf, M.S.I.T. No Comments

Using vertical, bulleted lists is a very effective way to make crucial points stand out, because bullet points are easy to scan and understand. Research shows that vertical lists attract a readers’ eye, and that readers of digital content prefer writing that’s formatted for easy scanning, because it allows them to skip through large chunks of text and get to the stuff that interests them.

There are several formatting methods that can achieve the goal of breaking up dense paragraphs of text; there’s bolding, line-spacing, indenting and even color-coding. But I think bulleted lists are the most powerful method to encourage reading content on a digital device.
Web readers typically want to absorb content quickly, and bullets are perceived as “shortcuts” to the concise and important content they’re looking for. In usability studies, readers gravitated towards bulleted lists first.

In the following examples, you can see that number 2 is much easier and faster to read, because the important points are clearly listed on short, individual lines:

Example 1
Our Secret Sauce: We limit our current project-load to three clients, so we can do our best work and be available to you to provide personal attention. We believe
You’ll get one-on-one personal support throughout the entire design and development process. You’ll learn “website anatomy” so you’re better equipped to ask questions and give feedback. We use plain language, not technical jargon and you’ll ALWAYS know what’s happening with your project at any given point.
Your contract will explain exactly what’s included and what to expect. You’ll have your own project timeline, and you’ll know the cost, upfront.

Example 2
Our Secret Sauce

• Projects are limited to three at a time, so we do our best work
• We educate & empower our clients by teaching as we go
• You get one-on-one personal support throughout
• We use plain language, not technical jargon
• Project management tools allow us to collaborate easily
• Your contract explains what’s included and what to expect
• You know the cost and timeframe, upfront

Studies also show that the amount of vertical space used in a list, is irrelevant. Readers don’t mind scrolling if they’re getting the info they want.
An interesting research finding shows that websites perceived as “inviting” often use bulleted lists, making content easier to read and understand. Users are more likely to scroll through a website containing lists than a website that mainly consists of text-heavy paragraphs.

6 Tips for Using Bulleted Lists

1. Write bulleted lists of similar length and related items.
Items in a bulleted list should include related elements of similar importance. This makes the shape of the list easy on the eye; it includes lots of white space.

2. Don’t use numbered lists unless the sequence or item-count is important.
Numbered lists are used when items occur in a specific order, for example, steps in a recipe, or a “top 10” list. Or like this list of 6 tips!
Numbered long lists can get confusing. In one particular study, people mistakenly thought they had to complete all of the steps in a numbered list, but they really only needed to complete just one. Don’t number if your list makes sense without it.

3. Be consistent in phrasing and grammar.
Each bulleted-list item should start with the same part of speech (i.e.: verb or noun) and all bullet points should be either fragments or complete sentences. Don’t mix them together.

4. Be consistent with formatting.
Use the basic rules of capitalization and punctuation:
• If the list items are sentences, capitalize the first word and use correct ending punctuation.
• If the list items are fragments, don’t use end punctuation.
• For hierarchical lists, use a different style of bullet for each group, for easier reading and comprehension.

5. Use discerning keywords at the beginning of each line and avoid repetitive phrasing.
Omit parts of speech like “the” and “a”. Use action-words at the beginning of the line.

6. Introduce the list with a clear, descriptive sentence or phrase.

The introduction tells the reader what the list is about or why it’s important. The intro doesn’t have to be a complete sentence if each item in the list makes sense on its own.

To make a bulleted list in HTML:

1. An unordered (not numbered) list:

starts with the <ul>tag, and each item within the list starts with an <li>tag. Remember to close the tags.

The list items will be marked with “bullets” by default. You can style the bullets by using the CSS list-style-type: 

and choosing one of these properties: disc, circle square, or none.

Example: 

<ul style=”list-style-type: disk”>

 <li>Bananas</li>
  <li>Oranges</li>
  <li>Apples</li>

</ul>

Looks like:

  • Bananas
  • Oranges
  • Apples

2. An ordered list

starts with the <ol>tag and each item within the list starts with an <li> tag. Remember to close the tags.

The list items will be marked with numbers by default. You can style the bullets by using the CSS type attribute: 

and choosing one of these properties:

type=”1″ The list items will be numbered with numbers (default)
type=”A” The list items will be numbered with uppercase letters
type=”a” The list items will be numbered with lowercase letters
type=”I” The list items will be numbered with uppercase roman numbers
type=”i” The list items will be numbered with lowercase roman numbers

Example: 

<ol type=”1″>
  <li>Bananas</li>
  <li>Oranges</li>
  <li>Apples</li>
</ol>

Looks like:

  1. Bananas
  2. Oranges
  3. Apples

3. Description lists

A description list is a list of terms, with a description of each term.

The <dl>tag defines the description list, the <dt> tag defines the term (name), and the <dd>tag describes each term:

Example:

<dl>
  <dt>Bananas</dt>
  <dd>- Sweet, yellow skinned fruit</dd>
  <dt>Oranges</dt>
  <dd>- Sweet, orange skinned fruit</dd>
 <dt>Apples</dt>
  <dd>- Pungent, red-skinned fruit</dd>
</dl>

4. Nested Lists:

List can be nested (lists inside lists):

Example:

<ul>
  <li>Bananas</li>
  <li>Oranges
    <ul>
      <li>Naval Oranges </li>
      <li>Mandarin Oranges</li>
       <li>Blood Oranges</li>
    </ul>
  </li>
  <li>Apples</li>
<ul>
      <li>Red Delicious Apples</li>
       <li>Granny Smith Apples</li>
    </ul>

</ul>

 Have fun trying these yourself! 

 
 

Questions? 

[email protected]

My Contact Page

Other articles you might like:

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

-6 Tips to Make Your Blog Post SEO Friendly

 

About the author

diane-author-300x181 6 Tips for Using Bulleted Lists for Online Content

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Reading time: 7 min
Page 2 of 3«123»

Find Topics

 Image and Aspect is a solution-based web presence development service for creatives, entrepreneurs and solopreneurs. We create impactful online presences that showcase your talents, skills, values & style, while focusing on influencing, engagement & connection.

 

It’s a collaborative process; we use streamlined project-management & communications tools so you’ll always know what’s happening with your project. And by adding personalized service, you get  one-on-one support. We want you to feel equipped, educated & empowered to ask questions & make decisions about your web presence & web platform.

 

Tips and Snips was born from the desire to give back; to support anyone who has an interest in learning the art and science of  web design and coding.

 

Thanks for your interest!

~Diane Metcalf, MS

Image and Aspect logo

Connect with me on Twitter!

Follow @MetcalfDiane

Categories

  • Blogging
  • bootstrap
  • CSS
  • Design
  • Entrepreneurs and Creatives
  • HTML
  • Job Seekers
  • Marketing
  • security
  • SEO
  • Thoughts
  • WordPress

Recent Posts

  • Why you need a customer thank-you page December 23, 2020
  • 10 things to do after creating your site November 8, 2020
  •  7 web design principles you should know October 15, 2020
  • Make your site mobile friendly with media queries September 18, 2020
  • Create a tiny browser icon for your site ID August 19, 2020

Older Posts

  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018

Tags

  • Blogging
  • bootstrap
  • CSS
  • Design
  • Entrepreneurs and Creatives
  • HTML
  • Job Seekers
  • Marketing
  • security
  • SEO
  • Thoughts
  • WordPress

Image and Aspect on Instagram

recent posts

  • Why you need a customer thank-you page
  • 10 things to do after creating your site
  •  7 web design principles you should know
  • Make your site mobile friendly with media queries
  • Create a tiny browser icon for your site ID

ImageAndAspect.com © 2020 Designed by ImageandAspect

 
This website or its third party tools use cookies to enhance our experience. More info CLICK HERE.