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: Development, Global
Tagged: , , ,
With: 0 Comments

What is Bootstrap? Bootstrap is a tool to help developers code responsive and mobile friendly website with HTML, CSS and Javascript. I regard is a must have for all who aspire to be an efficient developer. What makes Bootstrap so powerful is the fact that let’s developers create a clean and responsive interface without much knowledge and just in few lines. Finally, it is compatible on most of browsers like Chrome, Safari, Firefox, etc. Differences between Bootstrap 4 and Bootstrap 5 There are a really good changes between these two versions that improved the performance and made life easier to developers. Added an extra tierRead 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, 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, 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 →

By:
On:
In: CSS3
Tagged: ,
With: 0 Comments

Cada navegador interpreta el nostre codi bàsic com a ell li ve de gust, el que pot portar-nos moltes més hores de treball per intentar normalitzar el nostre disseny al navegador. Això succeeix pel fet que cada navegador té diferents propietats que es fan la competència entre si, ja que tots volen ser el teu navegador predeterminat. Els resets ens permeten “posar a zero” del navegador perquè mostri les propietats del CSS de la forma més exacta possible. Encara que tots els navegadors coincideixen en alguns valors importants (tipus de lletra serif, color de lletra negre, etc.) hi ha diferències tan importants com els margesRead More →

By:
On:
In: CSS3, Javascript
Tagged: , , ,
With: 0 Comments

Si volem que el menú de la nostra pàgina web remarqui la secció en la qual ens trobem, només necessitem una mica de codi en Javascript i CSS. D’entrada, a la fulla d’estils CSS determinarem una classe concreta per quan una secció estigui activa: .selected { color:#ff0000!important; } Finalment, en Javascript, li donarem la següent acció: $(‘.menu a’).each(function(index) { if(this.href.trim() == window.location) $(this).addClass(“selected”); }); El que fa aquesta acció és buscar quina és la pàgina en la qual ens trobem (window.location) i aplicar la classe “selected” a l’element del menú que contingui un vincle cap a aquesta pàgina. Òbviament, “menu a” dependrà de la classeRead More →