Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Tuesday 28 November 2023

Revisit "How to make the entire page fade in on load" using Vue.js

 index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Body Fade In</title>

    <link rel="stylesheet" href="./style.css" />

  </head>

  <body>

    <transition name="fade" appear>

      <h1>Hello World!</h1>

    </transition>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script src="./app.js"></script>

  </body>

</html>

style.css

.fade-enter-active,

.fade-leave-active {

  transition: opacity 1s;

}

.fade-enter-from,

.fade-leave-to {

  opacity: 0;

}

app.js

const app = Vue.createApp({});

app.mount("body");

Tuesday 29 May 2018

Cross browser font CSS

font-weight: 400;
font-size: 1rem;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #555;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga", "kern";
text-rendering: optimizelegibility;
background-color: #fff;​

Thursday 26 April 2018

CSS Grid Layout accordion

This example highlights an important difference required by CSS Grid Layout to function properly. I've put it in red to make it obvious. If this line used the auto width setting, then as the accordion-content items expanded, they would mess up the layout. By using fractions (fr), we force the columns to retain their widths.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>CSS Grid Layout accordion</title>
  <style>
    body {
      font-family: sans-serif;
    }

    #container {
      max-width: 46em;
      margin: 0 auto;
    }

    .grid {
      display: grid;
    }

    .two-columns {
      grid-template-columns: 1fr 1fr;
    }

    .accordion-link {
      width: 100%;
      display: block;
    }

    .accordion-content {
      overflow: hidden;
      display: none;
    }

    @media (max-width: 640px) {
      .grid {
        grid-template-columns: auto;
      }
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="grid two-columns">
      <div id="column1">
        <a href="#" class="accordion-link">Link 1</a>
        <div class="accordion-content">
          Possumus noster ex excepteur firmissimum, voluptate dolore quid non quem e constias in illum doctrina, quid praetermissum offendit eram voluptate.
        </div>

        <a href="#" class="accordion-link">Link 2</a>
        <div class="accordion-content">
          Quibusdam sunt aliqua commodo culpa, quo ne illum culpa minim, noster commodo officia, id te culpa aliquip.
        </div>
      </div>

      <div id="column2">
        <a href="#" class="accordion-link">Link 3</a>
        <div class="accordion-content">
          Ad ipsum eiusmod. Consequat non legam excepteur, ut duis constias. Sint quibusdam ne anim enim.
        </div>

        <a href="#" class="accordion-link">Link 4</a>
        <div class="accordion-content">
          Se appellat an laboris nam nostrud ad eram nescius.Ubi aliqua officia quo eiusmod malis admodum occaecat ne te ingeniis transferrem, quo minim esse qui quibusdam, sed incurreret praetermissum, commodo te senserit ea aute imitarentur laboris quis officia,
          litteris sint expetendis.
        </div>
      </div>
    </div>
  </div>
  <script>
    var acc = document.getElementsByClassName('accordion-link');

    for (var i = 0; i < acc.length; i++) {
      acc[i].addEventListener('click', function() {
        this.classList.toggle('active');
        var accordioncontent = this.nextElementSibling;
        if (accordioncontent.style.display === 'block') {
          accordioncontent.style.display = 'none';
        } else {
          accordioncontent.style.display = 'block';
        }
      });
    }
  </script>
</body>

</html>

Wednesday 25 April 2018

CSS Grid Layout responsive navigation

It's possible there is a better way of doing this. There are so many ways to do things using CSS Grid Layout. Anyway, here goes.
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>CSS Grid Layout navigation</title>
  <style>
    body {
      font-family: sans-serif;
    }

    #container {
      max-width: 46em;
      margin: 0 auto;
    }

    .grid {
      display: grid;
    }

    .single {
      grid-template-columns: auto;
    }

    .five-columns {
      grid-template-columns: auto auto auto auto auto;
    }

    #menu {
      display: none;
    }

    nav {
      display: block;
      width: 100.05%;
    }

    @media (max-width: 640px) {
      .grid {
        grid-template-columns: auto;
      }
      .five-columns a {
        display: block;
      }
    }
  </style>
</head>

<body onload="handleresize()">
  <div id="container">
    <header class="grid single">This is a banner</header>
    <a href="#" class="grid single" id="menu" onclick="toggleMenu()">Menu</a>
    <nav class="grid five-columns">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Portfolio</a>
      <a href="#">Contact</a>
    </nav>
    <main class="grid single">
      <p>Quis fabulas ita quorum dolore. Fore ab nostrud ubi quem aut esse nam appellat, arbitror o litteris, quo quamquam iis laboris. Se elit cernantur, veniam tractavissent arbitror culpa singulis.Tempor id laboris. Minim occaecat ita culpa export, arbitror
        ex eram, export ita constias hic sint ex eram admodum et praesentibus in labore ad probant a minim nam id laboris efflorescere, multos incididunt do exercitation do laborum culpa illum nescius enim. Non elit aliqua quis expetendis. Consequat legam
        nulla cernantur malis nam e elit irure aut constias, de magna constias mentitum an senserit ea commodo, eu aliqua esse tempor appellat, senserit multos offendit, quo fugiat est duis, commodo aute irure vidisse nisi.</p>
    </main>
    <footer class="grid single">This is the footer</footer>
  </div>
  <script>
    window.addEventListener("resize", handleresize);

    function handleresize() {
      var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      var nav = document.getElementsByTagName('nav')[0];
      var menu = document.getElementById('menu');
      if (width < 640) {
        nav.style.display = 'none';
        menu.style.display = 'block';
      } else {
        nav.setAttribute('style', 'visibility:visible');
        menu.style.display = 'none';
      }
    }

    function toggleMenu() {
      var nav = document.getElementsByTagName('nav')[0];
      if (nav.style.display === 'block') {
        nav.style.display = 'none';
      } else {
        nav.style.display = 'block';
      }
    }
  </script>
</body>

</html>

Wednesday 11 April 2018

CSS Grid Layout by example

In this blog entry, I am going to be using the CSS Grid Layout system available as standard, through the W3C.
There are many blog and vlogs about this, so why bother?
I would like to deliver a simple an consistent approach to all CSS Grid Layout challenges.
Before we make our first grid, I'm going to put a couple of things in place:
  • A CSS class called ".grid" thus : .grid { display: grid; grid-gap: 0.5em; } This enable us to create multiple grids in a row and differentiate between each element, thus: <div class="grid"></div> 
  • A CSS class called ".grid-element" thus : .grid-element { background: #555; color: white; padding: 1em; margin: 0.5em 0; } This enable us to create multiple grid elements which can be clearly seen thus: <div class="grid-element">.grid-element</div> 

grid-1

Our first grid is the simplest. It containes only 1 column.

CSS

#grid-1 { grid-template-columns: auto; }

HTML

<div class="grid" id="grid-1">
    <div class="grid-element">.grid-element</div>
</div>

grid-2

Our next grid is also simple. It contains 2 columns of equal width, and 1 row.

CSS

#grid-2 { grid-template-columns: auto auto; }

HTML

<div class="grid" id="grid-2">
    <div class="grid-element">.grid-element</div>
    <div class="grid-element">.grid-element</div>
</div>

grid-3

Our next grid is also simple. It contains 2 columns, one of 66.6% width, and 1 row.

CSS

#grid-3 { grid-template-columns: 66.6% auto; }

HTML

<div class="grid" id="grid-3">
    <div class="grid-element">.grid-element</div>
    <div class="grid-element">.grid-element</div>
</div>

grid-4

Our next grid is slightly more complicated. It contains 2 columns, one of 66.6% width using the fraction (fr) unit. In the first column, there is 1 row. In the second column, there are 2 rows.

CSS

#grid-4 { grid-template-columns: 2fr 1fr; } #grid-4-second-container { grid-template-rows: auto auto; }

HTML

<div class="grid" id="grid-4">
    <div class="grid-element">.grid-element</div>
    <div id="grid-4-second-container">
        <div class="grid-element">.grid-element</div>
        <div class="grid-element">.grid-element</div>
    </div>
</div>

grid-5

Our next grid is a variation on grid-4. It contains 2 columns, one of 66.6% width using the fraction (fr) unit. In the first column, there are 2 rows. In the second column, there is 1 row.

CSS

#grid-5 { grid-template-columns: 2fr 1fr; } #grid-5-first-container { grid-template-rows: auto auto; }

HTML

<div class="grid" id="grid-5">
    <div id="grid-5-first-container">
        <div class="grid-element">.grid-element</div>
        <div class="grid-element">.grid-element</div>
    </div>
    <div class="grid-element">.grid-element</div>
</div>

grid-6

Our next grid is a variation on grid-4. It contains 3 columns of equal width. In the first column, there is 1 row. In the second column, there are 2 row. In the third column there is 1 row.

CSS

#grid-6 { grid-template-columns: auto auto auto; } #grid-6-middle-container { grid-template-rows: auto auto; }

HTML

<div class="grid" id="grid-6">
    <div class="grid-element">.grid-element</div>
    <div id="grid-6-middle-container">
        <div class="grid-element">.grid-element</div>
        <div class="grid-element">.grid-element</div>
    </div>
    <div class="grid-element">.grid-element</div>
</div>

grid-7

Our next grid is slightly more complicated. It contains 3 columns of equal width. In the first column, there is 1 row. In the second column, there are 2 row. In the third column there is 1 row.

CSS

#grid-7 { grid-template-columns: 2fr 1fr; } #grid-7-column-1-container { display: inline-grid; grid-template-rows: auto auto; } #grid-7-row-2-container { display: inline-grid; grid-template-columns: auto auto; grid-gap: 0.5em; }

HTML

<div class="grid" id="grid-7">
    <div id="grid-7-column-1-container">
        <div class="grid-element">.grid-element</div>
        <div id="grid-7-row-2-container">
             <div class="grid-element">.grid-element</div>
            <div class="grid-element">.grid-element</div>
        </div>
    </div>
    <div class="grid-element">.grid-element</div>
</div>

grid-8

Our next grid makes use of the "grid-template-areas" and "grid-area" properties. Here I use it to create a standard layout of Logo (picture), Header, Nav, Main content area, Sidebar and Footer.

CSS

#grid-8 { grid-template-columns: repeat(auto-fill, 1fr); grid-template-areas: "pic hd hd hd hd hd hd hd hd" "nv nv nv nv nv n-home n-about n-portfolio n-contact" "main main main main main main sd sd sd" "ft ft ft ft ft ft ft ft ft"; } picture { grid-area: pic; } header { grid-area: hd; } nav { grid-area: nv; } a#contact, a#about, a#home, a#portfolio { text-align: center; } a#home { grid-area: n-home; } a#about { grid-area: n-about; } a#portfolio { grid-area: n-portfolio; } a#contact { grid-area: n-contact; } main { grid-area: main; } aside { grid-area: sd; } footer { grid-area: ft; }

HTML

<div class="grid" id="grid-8">
    <picture class="grid-element">Picture</picture>
    <header class="grid-element">Header</header>
    <nav class="grid-element">Nav</nav>
    <a href="#" id="home" class="grid-element">Home</a>
    <a href="#" id="about" class="grid-element">About</a>
    <a href="#" id="contact" class="grid-element">Contact</a>
    <a href="#" id="portfolio" class="grid-element">Portfolio</a>
    <main class="grid-element">Main</main>
    <aside class="grid-element">Aside</aside>
    <footer class="grid-element">Footer</footer>
</div>

grid-9

Our next grid is a copy of grid-4. This time I'm applying a little fluidity using a media query.

CSS

#grid-9 { grid-template-columns: 2fr 1fr; } #grid-9-second-container { grid-template-rows: auto auto; } @media (min-width: 768px) and (max-width: 1024px) { #grid-9 { grid-template-columns: auto; } }

HTML

<div class="grid" id="grid-9">
    <div class="grid-element">Doctrina amet deserunt excepteur do est laborum hic excepteur. Labore constias ne tractavissent. Vidisse malis aute litteris magna.Ubi quo sempiternum non doctrina aut export. Ex quae irure sed proident hic malis incurreret sed adipisicing. Minim pariatur ubi cillum quem sed doctrina quid iudicem singulis, de quo consectetur, laborum se nisi incurreret.
    </div>
    <div id="grid-4-second-container">
        <div class="grid-element">Doctrina amet deserunt excepteur do est laborum hic excepteur. Labore constias ne tractavissent. Vidisse malis aute litteris magna.Ubi quo sempiternum non doctrina aut export. Ex quae irure sed proident hic malis incurreret sed adipisicing. Minim pariatur ubi cillum quem sed doctrina quid iudicem singulis, de quo consectetur, laborum se nisi incurreret.
        </div>
        <div class="grid-element">Doctrina amet deserunt excepteur do est laborum hic excepteur. Labore constias ne tractavissent. Vidisse malis aute litteris magna.Ubi quo sempiternum non doctrina aut export. Ex quae irure sed proident hic malis incurreret sed adipisicing. Minim pariatur ubi cillum quem sed doctrina quid iudicem singulis, de quo consectetur, laborum se nisi incurreret.
        </div>
    </div>
</div>


Wednesday 21 March 2018

Full page background images CSS

If you want to cover the background of your web page, I suggest you do 2 things:
Reduce the file size of the image using the technique shown at https://orbitingweb.com/blog/optimizing-jpeg-images/. You should make sure you are using the correct image format. Here is a guide https://www.diffen.com/difference/JPEG_vs_PNG.
Use the following CSS code in your stylesheet:
html {
  background: url(img/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg.jpg', sizingMethod='scale')";
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.img/bg.jpg', sizingMethod='scale');
}

Monday 25 July 2016

Ratings field within Bootstrap using Font Awesome stars

I looked around for a nice easy rating field using stars. Just like the ones you find on tripAdvisor. All the solutions looked a little CSS or JS heavy and needed images which are more HTTP connections.
So my solution uses only a little CSS, a small amount of jQuery and font-awesome. You'll have to get font-awesome for it to work.
See below.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Font awesome stars</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    .star-selected
    {
      color:pink;
    }
    </style>

  </head>
  <body>
<form method="POST" action="someaction.php">
      <div class="form-group">
        <input type="hidden" name="stars">
        <i class="fa fa-star" aria-hidden="true" value="1"></i>
        <i class="fa fa-star" aria-hidden="true" value="2"></i>
        <i class="fa fa-star" aria-hidden="true" value="3"></i>
        <i class="fa fa-star" aria-hidden="true" value="4"></i>
        <i class="fa fa-star" aria-hidden="true" value="5"></i>
      </div>
      <button type="submit">Submit</button>
    </form>

   
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script>
    (function()
    {
      var theStars = $('form').find('i');
      $('i').on('click', function()
      {
        theStars.removeClass('star-selected');
        var theStarIclicked = $(this);
        var highVal = theStarIclicked.attr('value');
        theStarIclicked.addClass('star-selected');
        $("input[name='stars']").attr('value',highVal);
        theStars.each(function(i)
        {
          if($(this).attr('value') < highVal)
          {
            $(this).addClass('star-selected');
          }
        });       
        console.log('Star selected '+$("input[name='stars']").attr('value'));
      });
    })();
    </script>

  </body>
</html>

Thursday 5 February 2015

JS and CSS fall back using PHP

There are several solutions to JS and CSS out there on the web. I've tried quite a few, but I find that if I take my network connection out, they don't work. They don't fall back. Recently, maxcdn.bootstrapcdn.com went down causing websites, including my own, to suffer from a lack of bootstrap. Even though I'd put in some fall back code.
This prompted me to write the following code. Now I know I'll be criticised for using PHP as the solution, but if you've suffered as I have, you may consider this worth a try. Below is the PHP class followed by the HTML page which makes use of the class with the calls highlighted in red. In this case I'm calling Twitter Bootstrap.
callfallback.class.php
<?php
class callfallback
{
function __construct()
{

}

function getCSS($remote, $local)
{
if($this->testExists($remote) == TRUE)
{
echo '<link rel="stylesheet" href="'.$remote.'" />'.PHP_EOL;
}
else
{
echo '<link rel="stylesheet" href="'.$local.'" />'.PHP_EOL;
}
}

function getJS($remote, $local)
{
if($this->testExists($remote) == TRUE)
{
echo '<script src="'.$remote.'"></script>'.PHP_EOL;
}
else
{
echo '<script src="'.$local.'"></script>'.PHP_EOL;
}
}

function testExists($url)
{
$file_headers = @get_headers($url);
if($file_headers[0] == 'HTTP/1.1 200 OK')
{  
 return TRUE;
}
else
{
 return FALSE;
}
}

function __destruct()
{

}
}
?>
index.html
<!DOCTYPE html>
<?php
require_once 'callfallback.class.php';
$cfb = new callfallback;
?>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Fallback Template</title>
  <?php
  $cfb->getCSS('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css','css/bootstrap.min.css');
  ?>
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  </head>
  <body>
 
  <?php
  $cfb->getJS('https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js','js/jquery-1.11.2.min.js');
  $cfb->getJS('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js','js/bootstrap.min.js');
  ?>
</body>
</html>

Monday 28 April 2014

jQuery second word plugin

You've seen those fancy titles where the second word is a different colour from the first. To achieve this, you really don't want to have to put span tags all around your code. Below I've created a plugin which allows you to decide which elements have their second word looking different from the first. You can use it with any framework. Please excuse the separate CSS file, but I've been using LiveStyle with Sublime Text 2. It really speeds development up.
First the HTML:
<!DOCTYPE html>
<html lang="en">
  <head>  
    <title>Second word</title>  
    <link href='style.css' rel='stylesheet' type='text/css'>  
  </head>
  <body>
    <header>
      <h1>Second word</h1>
    </header>
    <section>
      <article>
        <h2>Sub header</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sin tantum modo ad indicia veteris memoriae cognoscenda, curiosorum. Si verbum sequimur, primum longius verbum praepositum quam bonum. Duo Reges: constructio interrete. Falli igitur possumus. Egone non intellego, quid sit don Graece, Latine voluptas? Sed virtutem ipsam inchoavit, nihil amplius. Sed eum qui audiebant, quoad poterant, defendebant sententiam suam.</p>
      </article>
      <article>
        <h2>Sub heading</h2>
        <p>Quis est, qui non oderit libidinosam, protervam adolescentiam? Nam si amitti vita beata potest, beata esse non potest. Recte, inquit, intellegis. Idemne potest esse dies saepius, qui semel fuit? Venit enim mihi Platonis in mentem, quem accepimus primum hic disputare solitum; Aliter enim explicari, quod quaeritur, non potest. Profectus in exilium Tubulus statim nec respondere ausus; Nos vero, inquit ille;</p>
      </article>        
    </section>
    <footer><p>&copy; Second word 2014</p></footer>  
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="secondword.plugin.js"></script>
    <script>
    (function()
    {
        $('header > h1, article > h2').secondword();
    })();
    </script>
  </body>
</html>

Now the style.css:
body
{
padding:1em;
font-family:Sans-serif;
}
header, footer, article > h2
{
font-family:Serif;
color:red;
font-style:italic;
}
section > article
{
text-align:justify;
line-height:1.7;
}
body, header > h1 span.secondword, article > h2 span.secondword
{
color:#777;
}

And finally, the jQuery plugin, secondword.plugin.js:
(function($)
{
  $.fn.secondword = function()
  {
    $(this).each(function()
    {
      var text = $(this).text().split(' ');
      if(text.length < 2) return;
      text[1] = '<span class="secondword">'+text[1]+'</span>';
      $(this).html(text.join(' '));
    });
  }
})(jQuery);

Monday 17 February 2014

Twitter Bootstrap CSS snippets

When creating a website using Twitter Bootstrap you often find yourself using the same CSS code snippets. Below are some of mine.

/*Standard bootstrap colour palette*/
.gray-darker
{
  background:#222222;
  color:white;
}
.gray-dark
{
  background:#333333;
  color:white;
}
.gray
{
  background:#555555;
  color:white;
}
.gray-light
{
  background:#999999;
  color:white;
}
.gray-lighter
{
  background:#EEEEEE;
  color:#222222;
}
.brand-primary
{
  background:#428BCA;
  color:white;
}
.brand-success
{
  background:#5CB85C;
  color:white;
}
.brand-info
{
  background:#5BC0DE;
  color:white;
}
.brand-warning
{
  background:#F0AD4E;
  color:white;
}
.brand-danger
{
  background:#D9534F;
  color:white;
}

/* Remove colours of navigation bar */
.navbar-default, .navbar-inverse
{
        background-image:none;
background-color:white;
border-color:white;
box-shadow:none;
}

/* Set default colour for inactive navigation items in inverse bar */
.navbar-inverse .navbar-nav > li > a
{
  background:#222222;
  color:white;
}

/* Set hover colour for inactive navigation items in inverse bar */
.navbar-inverse .navbar-nav > li > a:hover
{
  background:#333333;
  color:white;
}

/* Set default colour for active navigation items in inverse bar */
.navbar-inverse .navbar-nav > li.active > a
{
  background:#555555;
  color:white;
}

/* Set hover colour for active navigation items in inverse bar */
.navbar-inverse .navbar-nav > li.active > a:hover
{
  background:#999999;
  color:white;
}

/* Set default colour for inactive navigation items in default bar */
.navbar-default .navbar-nav > li > a
{
  background:#222222;
  color:white;
}

/* Set hover colour for inactive navigation items in default bar */
.navbar-default .navbar-nav > li > a:hover
{
  background:#333333;
  color:white;
}

/* Set default colour for active navigation items in default bar */
.navbar-default .navbar-nav > li.active > a
{
  background:#555555;
  color:white;
}

/* Set hover colour for active navigation items in default bar */
.navbar-default .navbar-nav > li.active > a:hover
{
  background:#999999;
  color:white;
}

/* Align figure text to centre */
figure
{
  text-align:center;
}

/* Align figure images to centre */
figure img
{
  margin:0 auto;
}

/* Change size and colour of glyph icons */
span.glyphicon
{
  font-size:6em;
  color:#222222;
}

/* Make the carousel images centre and take up the whole carousel */
.carousel > .carousel-inner > .item > img
{
  margin:0 auto;
  width:100%;
}

/* Lift the arrows a little higher to vertical middle and dim */
.carousel-control > .icon-prev, .carousel-control > .icon-next, .carousel-control > .glyphicon-chevron-left, .carousel-control > .glyphicon-chevron-right
{
  top:40%;
  opacity:0.5;
}

/* Remove the awful background gradient */
.carousel-control.right, .carousel-control.left
{
  background-image:none;
}

/* Take the right arrow closer to the edge */
.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right
{
  right:20%;
}

/* Take the left arrow closer to the edge */
.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left
{
  left:20%;
}

Friday 17 June 2011

Using PHP to create a dynamic page navigation based on filenames

Here is the problem. You create a bunch of pages. You want to highlight the current page within the navigation. You don't want to manually change the navigation elements to each page.

See demo.

In the example below I create an associative array which contains two elements:

  1. The name of the page which the navigation points to.
  2. The name which should appear in the navigation.

I then grab the filename of the of the current page in the browser.
I then traverse the associative array, each time comparing the filename against the current file shown in the browser, each time creating an anchor using the values.

If array filename and current page filename are the same, then I add a CSS ID to the anchor tag.

You will need to write a little CSS to highlight the current page anchor such as:

nav a#activeMenuItem
{
background:#EEEEEE;
}


But other than that, it works like a charm. Have fun!


<nav>
<?php
$navArray = array('index.php'=>'home', 'services.php'=>'services','portfolio.php'=>'portfolio','contact.php'=>'contact');
$fileName = substr(strrchr($_SERVER['SCRIPT_NAME'],47),1);
foreach($navArray as $fname => $linktitle)
{
echo '<a href="'.$fname.'"';
if($fname==$fileName)
{
echo ' id="activeMenuItem"';
}
echo '>'.$linktitle.'</a>';
}
?>
</nav>

Friday 10 June 2011

Simple liquid grid layout

I was reading this blog post earlier today, in which it recommends to "Use liquid layouts" and "Roll your own grids". The example below does just this, so with jQuery mobile, fttext etc. I may just be in a good place to develop responsive web designs.

See demo.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Liquid Grid</title>
<!--[if IE]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:sans-serif;
}
.oneCol, .twoCol, .threeCol, .goldenRatioLeft, .goldenRatioRight
{
clear:left;
}
.oneCol
{
width:100%;
}
.twoCol section
{
width:50%;
}
.threeCol section, .goldenRatioLeft section.first, .goldenRatioRight section.last
{
width:33.3%;
}
.oneCol, .twoCol section, .threeCol section, .goldenRatioLeft section, .goldenRatioRight section
{
background:#EEEEFE;
float:left;
}
.goldenRatioLeft section.double, .goldenRatioRight section.double
{
width:66.6%;
}
h1, p
{
margin:0.5em;
}
</style>
</head>
<body>

<section class="oneCol">
<h1>Header 1</h1>
</section>

<section class="twoCol">
<section class="first"><p>Column 1 of 2 columns.</p></section>
<section><p>Column 2 of 2 columns.</p></section>
</section>

<section class="threeCol">
<section class="first"><p>Column 1 of 3 columns.</p></section>
<section class="second"><p>Column 2 of 3 columns.</p></section>
<section><p>Column 3 of 3 columns.</p></section>
</section>

<section class="goldenRatioLeft">
<section class="first"><p>Golden ratio left column 1.</p></section>
<section class="double"><p>Golden ratio left column 2.</p></section>
</section>

<section class="goldenRatioRight">
<section class="double"><p>Golden ratio right column 1.</p></section>
<section class="last"><p>Golden ratio right column 2.</p></section>
</section>

</body>
</html>

Friday 27 May 2011

Semi opaque header on photographic background

I saw this technique recently on a designer website and thought it was a nice effect.

See demo.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky footer</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
padding:6em;
opacity:0.8;
filter:alpha(opacity=80);
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1
{
font-size:6em;
color:yellow;
}
</style>
</head>
<body>
<img id="background" src="http://farm5.static.flickr.com/4089/4945221855_b1675bb80a.jpg" alt="Tiffany Camera 2" />
<br /><br />
<div id="container">
<h1>The Header</h1>
</div>
</body>
</html>

Tuesday 17 May 2011

Prettier navigation blocks Horizontal

This is an effect used by designers to add a little texture to navigation block.

See demo.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pretty nav blocks</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:sans-serif;
}
nav a, nav a:link, nav a:active, nav a:hover, nav a:visited
{
color:#FFFFFF;
}
nav a
{
display:block;
float:left;
width:4em;
height:1em;
text-decoration:none;
background:#222222 url(images/buttonbg.png) repeat-x;
padding:1em;
border-right:0.08em solid #FFFFFF;
border-left:0.08em solid #CCCCCC;
text-align:center;
}
nav a:hover
{
background:#666666 url(images/buttonbg.png) repeat-x;
border-left:0.1em solid #CCCCCC;
}
</style>
</head>
<body>
<section id="mainContent">
<nav>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
</nav>
</section>
</body>
</html>

Monday 16 May 2011

Another radial gradient background

Here is another example of using a radial gradient for a background, just because it looks nice.

See demo.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radial Gradient Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
#background
{
position:absolute;
z-index:-1;
background:#FF0000;
/* url(images/check.gif); */
width:100%;
height:100%;
}
.contentHolder
{
margin:0 auto;
width:800px;
padding:10px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
color:#FFFFFF;
}
#topPart
{
height:200px;
}
#middlePart
{
height:400px;
}
#bottomPart
{
min-height:200px;
}
</style>
</head>
<body>
<img id="background" src="images/radialGradientBackground.png" alt="gradient" />
<div id="topPart">
<div class="contentHolder">
<h1>Hello</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>

Use of wood and paper textures

This example makes use of textures, both wooden and paper. It's the starting position of putting together a website for a local carpenter. I also use one of the Google fonts to add a handwritten effect.

See demo.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Local carpenter</title>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<style>
html, body
{
font-family: 'Reenie Beanie', arial, serif;
background:url(images/coursepaper.jpg);
}

#mainContent, #footer
{
margin:0 auto;
width:800px;
}
#mainContent, #paper, #footer
{
position:relative;
padding:20px;
-webkit-box-shadow: 4px 4px 4px #737373;
-moz-box-shadow: 4px 4px 4px #737373;
box-shadow: 4px 4px 4px #737373;
behavior: url(scripts/PIE.htc);
}
#mainContent
{
background:url(images/plywood.jpg);
min-height:440px;
}
#leftSection
{
float:left;
width:140px;
}
#subNav
{
 float:left;
 width:136px;
 margin-left:60px;
}

#subNav a.subMenu, a.subMenu:hover
{
font-size:2em;
color:#FFFFFF;
}

#subNav a.subMenu
{
display:block;
height:96px;
background:url(images/woodenbutton.png) 0 0 no-repeat;
margin-top:0px;
padding-top:20px;
padding-left:20px;
}

#subNav a.subMenu:hover
{
background:url(images/woodenbuttonover.png) 0 0 no-repeat;
padding-top:24px;
padding-left:24px;
}

.menuSelected
{
}
img
{

}
p
{
font-size:1.4em;
}
#paper
{
float:right;
background:url(images/paper.jpg);
width:500px;
min-height:300px;
}
#footer
{
background:url(images/plywood2.jpg);
position: relative;
min-height:40px;
}
</style>
</head>
<body>
<br />
<div id="mainContent">
<div id="leftSection">
<img src="images/stamp.png" alt="stamp">
<div id="subNav">
  <a href="subPage1.html" class="subMenu menuSelected">First</a>
  <a href="subPage2.html" class="subMenu">Second</a>
</div>
</div>
<div id="paper">
<h1>Welcome to the Local Carpenter</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</div>
</div>
<br />
<div id="footer"></div>
</body>
</html>

More use of radial gradients

Another very simple example of how to use radial gradients. In this case, to add lighting to your headers and footers.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fading Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#topHalf
{
height:50%;
background:#D4E4DF;
}
#bottomHalf
{
height:50%;
clear:both;
background:#B6CAC3;
}
#topContent, #bottomContent
{
margin:0 auto;
width:800px;
min-height:100%;
}
#topContent
{
background:url(images/fadingbgtop.png) no-repeat center top;
}
#bottomContent
{
background:url(images/fadingbgbottom.png) no-repeat center bottom;
}
</style>
</head>
<body>
<div id="topHalf">
<div id="topContent">
<h1>This is a sticky header example</h1>
</div>
</div>
<div id="bottomHalf">
<div id="bottomContent">
<h1>This is a sticky footer example</h1>
</div>
</div>
</body>
</html>