Make text grow on page load with CSS keyframes
Using CSS keyframe animations on page load can add something extra to your design. Whether it be animating a border, a background change or section grow, using keyframes to change…
Tag: HTML
Change image based on screen size
Mobile based viewers of your website are going to be on smaller screens and (in theory) have slower internet, thus making a decent means for smaller sized and lower quality…
Load smaller image in first with Javascript
How to avoid images popping in after the page has loaded by loading in and displaying a much smaller one first. Credit to FThompson here at StackOverflow. I edited it…
Storing HTML in a MySQL database
How to store HTML in a MySQL database, this is done for purposes such as a blog or CMS where dynamic pages are generated from a database. The correct MYSQL…
Change background and text based on time with Javascript
Changing a websites background color based on client side (viewers) time is easily done with a small amount of vanilla Javascript. Changing a website background color or other styles has…
Responsive CSS style based on screen width with @media
Using @media in CSS allows you to specify styles for a certain viewpoint (width/height). This helps with creating responsive designs if you’re not using a framework such as Bulma or…
A clean and modern Bootstrap mockup
Looking at different approach to design with Bootstrap 4, a free flowing open one page design. A large amount of websites have defined areas and even i am guilty of…
Video background with CSS
Here is a method to have a video autoplay and loop in the background of a webpage. The CSS has focus on it being somewhat responsive, With a framework like…
The dilemma
Redesigning my website apart from the looks overhaul I wanted it to be quick and light with minimal requests. Through using CDN’s and minifying I got it to a decent…
Random image on page load with HTML and PHP
Here is a quick and very easy way to select and display a random image each time the page is loaded. Store the image links in an array and with…