By:
On:
In: CSS, Development, Global, UX Design
Tagged: , ,
With: 0 Comments

Creating CSS link hover effects helps a web page look more creative and fun. Here are three CSS effects for you to grab and use in your next project so you can stand out from the crowd. Hover Effect 1: Background Box Shadow This effect will slide a background box shadow across the inline link, changing the color of the link text as it does so. First, we apply padding around the link, then add a negative margin of the same value to prevent the padding from breaking the flow of the text. We’ll use box-shadow instead of the background property since it allows usRead More →

By:
On:
In: CSS, Global, HTML
Tagged: , , , ,
With: 0 Comments

In every web project sooner or later, icons are used. The icons can represent the typical facebook, instagram, youtube… as well as the typical images that we end up seeing everywhere. In this post we will see how we can implement them on our websites. Fontawesome is a repository of icons, some paid and some free. Updated and quality images of well-known brands, emoticons… Fontawesome and other icon repositories help us save time in the implementation of our web project. There are also other examples of alternatives that offer icons such as: glyphicons  (the bootstrap included library) iconmoon.io ionicons octicons In the case of ourRead More →

By:
On:
In: CSS, Global, HTML, Javascript, ProcessingJS
Tagged: , , , , ,
With: 0 Comments

The best code editors don’t just let you edit files, they help you find and fix bugs and make it possible for you to customize just about anything you want. Next, we have a selection of the best. 1. Visual Studio Code Free, stable, very robust and good working speed are some of the main features of Visual Studio Code, the code editor developed for Windows although it also works with Mac. Especially recommended for large and complex projects. 2. Sublime Text Is a valid code editor for Mac, Windows and Linux and is one of the most complete text editors that exist. Its easeRead More →

By:
On:
In: CSS, Development, HTML, Javascript
Tagged: , , , , , ,
With: 0 Comments

As the name implies, Chrome Developer Tools is a set of web developer tools built directly into the Google Chrome browser that allows web developers to interfere and manipulate applications via the browser. With this tool you can easily: View and change page’s styles Debug Javascript Code Analyze runtime performance, so you can optimize your code View messages and running JavaScript in the Console To open DevTools, you can right-click anywhere on the page and select inspect element or you can choose the “tools > developer tools” option from the top right menu.   Now I’m going to show you some really useful and simpleRead More →

By:
On:
In: CSS
With: 0 Comments

Hello! In this post you’ll learn how to create a bottom navigation menu with CSS and HTML. Bottom Navigation This type of navigation is mostly used in apps allowing movement between primary destinations.  Usually the bars shows three to five buttons at the bottom of a screen. Each one has an icon or a text label. When the user taps or clicks an element from the bottom navigation is taken to the top-level navigation destination associated with that one. Step 1 First of all, you must create the CSS and HTML files. Step 2 In the html.html file write the HTML basic structure.   StepRead More →

By:
On:
In: CSS
With: 0 Comments

Hello! In this tutorial we are going to learn how to create a dropdown menu using HTML/and CSS only. STEP 1 First of all we have to open the program and create the folder with HTML and CSS files. STEP 2 We can continue creating the HTML basic structure.   STEP 3 First of all we should create a div <header> inside this div we are going to put all out content. The content of our div will be a list <ul> and this list we will use sublist <li>. We can use as many labels as we want.   STEP 4 When we haveRead More →

By:
On:
In: CSS, HTML, Javascript
With: 0 Comments

Hello! In this entry you will discover about CodePen.io, a handy tool for any kind of web designer, including ourselves. The use of this webpage is completely free, and you can create as many pens (which will be explained later) as you wish. It does have a Premium feature that adds more functionalities, but for most of the users needs, it isn’t necessary at all. This webpage is made specifically for the use, practice and learning of the three main languages for web: HTML, CSS and JS. It lets you work on it online, getting updated results as you work on it, which removes theRead More →

By:
On:
In: CSS, HTML
Tagged: , , , ,
With: 0 Comments

There are many types of dropdown menus, but in this post we will explain how to create the most basic. 1. HTML Use any element to open the dropdown menu, <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS. 2. CSS The following structure is one of the main possibilities that is related to the previous HTML.  Basic Dropdown:  Create a dropdown box that appears when the user moves the mouse over anRead More →