code — furycd001

CSS reset :?

Mon, 31 Dec 2018 02:38:37 +0000

Every web browser uses what is known as a base stylesheet. This ensures that any HTML is rendered somewhat reasonably when you forget to include a piece of custom CSS. You know things like, blue for links that you've yet to visit, purple for links that you've already visited, bold for the likes of strong tags & different text sizes for heading. All those things and more are not always the same browser to browser. NO.. Not all browsers use the same base stylesheet, so that custom CSS you've just spent hours, maybe even days creating might be affected in some way by a default style that's implemented within your browsers base stylesheet. The easiest and most simplistic way to keep your CSS intact is to include a CSS reset. Sometimes though, people are happy with what their browser’s base stylesheet provides. Things such as font weights, line height, bullet points and other styles are often fine. If they’re not, then they can easily be adjusted.

What is a CSS reset :?

A CSS reset essentially provides a blank canvas so that any styles applied are sort of almost certain to be your own. Most CSS resets require you to re-style all your elements, which could make your CSS file much larger than you'd like. But at the same time it will also reduce browser compatibility issues.

Should I use a CSS reset :?

Should you use a CSS reset ?? Well that really depends. Like if you have a pretty small or basic website then creating and using a CSS reset might not be worth the time and effort. Though if you have a pretty large site or a site that just has tons of elements, then using a CSS reset might just the right thing. CSS resets may be appealing and work for you, but they'll not be for everyone. You'll need to weigh everything out and look at everything for yourself.

#browser #www #web #css #html #code

A common mistake made when coding a hamburger menu

Mon, 24 Dec 2018 13:46:03 +0000

When coding a hamburger menu most developers or coders position the menu absolute, when in actual fact it should be the content that is positioned once the sidebar is opened. Instead of positioning the menu itself, simply position everything else that's in the menu. Below is some example code, followed up with explanatory comments....

HTML




  Hamburger menu links go here

CSS

/* Arbitrary CSS variable values for explanatory purposes */
:root {
  --sidebar-width: 100px;
  --sidebar-bg-colour: blue;
}

.sidebar {
  display: none;
  position: relative;
  width: var(--sidebar-width);
}

@media (max-width: 767px) {
  html.sidebar-is-open .sidebar {
    display: block; 
     /* 
      The sidebar is just rendered in default position,
      as it appears in the document flow
     */
  }

  html.sidebar-is-open .main-content {
    position: fixed; 
    /* 
     It is the main content that is positioned. 
     This is the crux of the implementation. The rest is all sugar.

     Cons: the body will scroll to the top, losing your user's scroll position
    */

    /* prevents resizing from its original full-screen width */
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    width: 100%; 

    overflow: hidden;
  }

  /* Optional enhancement: 
     make the overscroll on iPhone the same colour as the sidebar */
  html.sidebar-is-open body {
    background-color: var(--sidebar-bg-colour);
  }
  .sidebar {
    background-color: var(--sidebar-bg-colour);
  }
}

const documentElement = document.querySelector("html");
const contentElement = document.querySelector(".main-content");
const sidebarElement = document.querySelector(".sidebar");
const sidebarIsOpen = () => documentElement.classList.contains("sidebar-is-open");

const openSidebar = () => {
  /* How you trigger the change is up to you */
  documentElement.classList.add("sidebar-is-open");
};

const closeSidebar = () => {
  documentElement.classList.remove("sidebar-is-open");

  /* Sidebar is closed, so keeping event listener is just a waste of resources
     and source of bugs if openSidebar() is run again */
  contentElement.removeEventListener("click");
};

const toggleSidebar = () => {
  sidebarIsOpen() ? closeSidebar() : openSidebar();
};

#browser #www #web #css #html #code

Adding a full page background image to any web page.

Mon, 29 Oct 2018 15:54:46 +0000

Here's a simple piece of CSS code that will help you add a background image to any web page and make it take up the full page width & height. Simply add the code below to your “.css” file and then change the path to the image.

CSS

html { 
background: url(siteimages/whatever.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#HTML #CSS #Code #Web

Creating an apple style search box

Fri, 26 Oct 2018 19:42:38 +0000

Ever wanted to create one of those neat look search boxes that used to be found on apples website ?? Well here's the HTML & CSS code to create just the thing. Note that with search boxes you can change the action=“http://www.duckduckgo.com/search" to any search engine you like. I've chosen to use Duckduckgo because that's my search engine of choice.

[ NOTE THE “FORM” & “INPUT” HTML WAS NOT SHOWING CORRECTLY SO I HAD TO ENTER A SPACE AT THE START AFTER “<“. PLEASE REMOVE THIS SPACE BEFORE USING THIS CODE ]

HTML

< form method="get" action="http://www.duckduckgo.com/search" id="search" target="_blank">
< input name="q" type="text" size="40" placeholder="Search..." />

CSS

#search input[type="text"] {
background-color; #87afc7;
border: 0 none;
font-family: 'Ubuntu Mono', monospace;
color: #222222;
width: 400px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
 
#search input[type="text"]:focus {
width: 400px;
}

#HTML #CSS #Web #Apple #Duckduckgo #Search #Code

Styling multiple html links with css.

Wed, 22 Aug 2018 17:21:42 +0000

You can style multiple html links differently on the same page simply by adding a class to the link & then some css. For example the two linsk below would be styled with the css that follows....

HTML

Link text
More link text

CSS

a.newclass:link {
color: #444444;
text-decoration: none;
}

a.newclass:visited {
color: #444444;
text-decoration: none;
}

a.newclass:hover {
color: #f2f2f2;
text-decoration: none;
    }

a.newclass:active {
color: #444444;
text-decoration: none;
}

a.anothernewclass:link {
color: #f2f2f2;
text-decoration: none;
}

a.anothernewclass:visited {
color: #f2f2f2;
text-decoration: none;
}

a.anothernewclass:hover {
color: #222222;
text-decoration: none;
}

a.anothernewclass:active {
color: #f2f2f2;
text-decoration: none;
}

#Web #HTML #CSS #Code

Fullscreen background css.

Wed, 22 Aug 2018 17:20:13 +0000

Add the code below to the top of your .css file. Change the image name / location & everything’s good to go….

CSS

html {
background: url(image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#Web #HTML #CSS #Code