front end hacking

Highlight text on selection in css

Highlight text on selection in cssCreate an awesome effect on selecting text using css. we need to create a para with some text.<p class="highlight-text">Select the text to see magic . </p>Now let’s add a ::selection pseudo selector on an element to style text within it when selected..highlight-text ::selection { background : #738BFA; color : white; }


A Free Gutenberg Course from CSS-Tricks!?

A Free Gutenberg Course from CSS-Tricks!? →There are few brands more synonymous with quality in the web development niche than CSS-Tricks. (A List Apart comes to mind. Smashing Magazine, maybe. We work for you to think of us that way…) So when I saw that CSS-Tricks had a free text-based walk-through of how to do Gutenberg development for free, I knew I had to share. That Lara Schenck is a coauthor just made it even more important that I do. (I totally mean to name-drop here, but I had the pleasure of meeting Lara at Loop Conf this year....

front end hacking

The Power of Nth Child and All-CSS Dynamic Widths

This should be just a short blog to show you guys something pretty cool that I learned recently.Here goes:On a page there are some buttons.There might be up to three buttons.Style appropriately.Option One: JavascriptSo we count the number of boxes, then add a class such as one-of-three to assign some width-dependent CSS. Something like this:var wrapper = document.getElementById('div.buttonWrap');var count = wrapper.childElementCount();wrapper.classList.add('children-' + count);This isn’t bad. Sure, it’ll work, but what if we could...


Transitions in Space

A few simple transitions can make a huge difference. In this article we’ll learn how we can use transitions to bring our content to life, as well as plan and build our hover effects to perform smoothly and look great. Transitions vs Animations Transitions are a great way to smooth the changes from one state to another, and back again, in the browser. They seem like a simpler alternative to the keyframes and animation approach, but they are useful in very different ways. For example, a transition isn’t much use if you want an animation to...


Fixing the Gaps in inline-block

Fixing the Gaps in inline-block →If you need to line HTML elements up horizontally in CSS, display: inline-block is a great solution that comes with a lot less baggage than float. Not no baggage, though: it puts unwanted little spaces between elements, the way display: inline does. Here’s the classic article outlining the issue. If you’re tired of working around this problem, there’s a simple solution that uses font-size: 0 to set the size of the spaces to 0. As usual, Chris Coyier from CSS-Tricks does a great job outlining it.


jQuery Smooth Scrolling from CSS-Tricks

jQuery Smooth Scrolling from CSS-Tricks →As it says at the top, “Performs a smooth page scroll to an anchor on the same page.” The beauty of this code snippet is that it just works, everywhere across the site: anywhere there’s a link to an anchor on the same page, that becomes a smooth JavaScript scroll rather than a choppy instantaneous jump. To use it, enqueue it from your theme’s functions.php. You’ll probably also want to work with the fact that it uses $ to mean “jQuery”—either by simply changing $ to jQuery throughout...