css3

Position fixed and overflow-y:scroll issue

I have read this question & answer: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue as well as a bunch of other conflicting use cases. I’ve tried applying different overflow types to different parents also. Nothing seems to get my use case working. My Case I have a full height fixed menu that will contain lots of links so…
Read more

Unwanted text size change on scroll on dropdown menu

I have a dropdown menu on which links get bigger when the page is scrolled. This unfortunately then threatens to drop the bottom-most ones off the foot of the page as a result. The site is http://www.jswhite.co.uk/ Does anyone know how to prevent this from happening? Source: css3

moving object between two preset location on scrolling

i want to learn how to replicate this effect on the main screen of this website https://overv.io/ The traget(booklets) starts off somewhere fixed and translate/rotates towards 0 once it’s reached it’s original location, scrolling further down won’t change any location scrolling back up with move the items back towards the location it stated. Here’s something which i think it should…
Read more

make background gradient smoother in firefox

I’m applying a linear background gradient to the <html> tag but in Firefox it’s not very smooth, ie you can see lines: See this image: In chrome it’s much smoother. My CSS code is as follows: html{ /* Permalink – use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3c352e+0,121212+100 */ background: #3c352e; /* Old browsers */ background: -moz-linear-gradient(top, #3c352e 0%, #121212…
Read more

use sass mixin together with compass

Using a compass with sass I do like below for border-radius. @import “compass”; #test{ background: red; @include border-radius(5px); width:50px; height:50px; } It’s tedious to write @include border-radius(5px); every time. If I use sass’s mixin, I will have to do @mixin radius($radius) { -webkit-border-radius: $radius; border-radius: $radius; } .selector { @include radius(0 0 5px 5px); } Which is not using compass…
Read more

Using TTF files for font-family

I am trying to use a .ttf file downloaded from web to use ‘anagram.ttf’ as my font-family. <html> <head> <style> @font-face {font-family: ‘Anagram’; src: url(‘anagram.ttf’);} p{font-family:anagram;} </style> </head> <body> <p>This is paragraph one.</p> <p>This is paragraph two.</p> </body> </html> But, finally my browser is showing as: Rendered fonts: Times New Roman—22 glyphs Also showing warning in console: Failed to decode…
Read more

how to activate the box which is pinned, angular js UI ng-grid pin functionality

i am using ng-grid Column Pinning when i pinned the pin get active that time that particular box should get active with bold color . can any one help me ? Javascript var app = angular.module(‘myApp’, [‘ngGrid’]); app.controller(‘MyCtrl’, function($scope) { $scope.gridOptions = { data: ‘myData’, enablePinning: true, columnDefs: [{ field: “name”, width: 120, pinned: true }, { field: “age”, width:…
Read more

How to change the menu link color when the link is opened in iframe?

<html> <body> <div id=”navi”> <ul width=”100%” align=”center” style=”padding-top:20px; display:inline”> <li> <a style=”font-size:25px; color:#0ff; padding-top:20px; font-weight:bold;” href=”corporate_frame.html” target=”load”>Corporate</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </li> <li> <a style=”font-size:25px; color:#0ff; font-weight:bold” href=”security_frame.html” target=”load”>Security</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </li> <li> <a style=”font-size:25px; color:#0ff; font-weight:bold” href=”driver_frame.html” target=”load”>Driver</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </li> <li> <a style=”font-size:25px; color:#0ff; font-weight:bold” href=”medical_frame.html” target=”load”>Medical</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </li> <li> <a style=”font-size:25px; color:#0ff; font-weight:bold” href=”engineering_frame.html” target=”load”>Engineering</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </li> <li> <a style=”font-size:25px; color:#0ff; font-weight:bold” href=”hospitality_frame.html” target=”load”>Hospitality</a> </li> </ul>//closing tag…
Read more

When to use element.style selector in css?

The following list of selector types is by increasing specificity: Universal selectors (i.e., *). Type selectors (e.g., h1) and pseudo-elements (e.g., :before). Class selectors (e.g., .example), attributes selectors (e.g., >>[type=”radio”]) and pseudo-classes (e.g., :hover). ID selectors (e.g., #example). In addition to above selectors, there is a default selector called, When do we prefer using this selector? How the CSS specificity…
Read more