SEARCH KEYWORD -- CSS


  You can get properties of pseudo-element using JavaScript now

The pseudo-element6 in CSS is extremely useful, you can use it to create CSS triangles and lots of other elements without overuse many HTML elements. In the past, you cannot get the property value of pseudo-element in CSS using JavaScript. Now you can call a new method in JavaScript to get them easily. Assume you have below CSS codes: .element:before { content: 'NEW'; color: rgb(255, 0, 0); } To get the properties in .element:before, you can use below JavaScript method: var color = window.getC...

   pseudo-element,property,JavaScript     2014-04-05 20:58:25

  CSS Overflow Property Utilization

Sometimes when we do CSS on HTML elements. We may want to hide some text when the text in a specified box overflows. Usually, we can use a CSS property overflow:hidden to hide the text so that the format of the whole element will not be affected. But will it always work? I believe some of us may encounter problems when we want to hide some text in a table td cell with specified width. If we use td { overflow:hidden;}, it is supposed to hide the text if the text in a td cell overflows. But the fa...

   CSS,Overflow,TD,Cell,Hidden     2014-10-21 08:24:48

  JS code to check different mobile devices

Today I come across a code snippet which uses JavaScript to check different mobile devices and then loads different CSS files accordingly. As we know that there are mobile devices with different screen sizes, it's always troublesome for web developers to develop cross browser and cross device compatible codes. Hope this one can help those who develop web apps on mobile devices. // Check whether it's a mobile device // wukong.name 20130716 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (...

   JavaScript,Mobile device,Detection     2013-11-28 05:25:10

  A simple tutorial about CSS flex property

CSS Flexbox is a layout module that makes it easier to create flexible and responsive layouts in CSS. It provides a simple and powerful way to align elements within a container and distribute space between them. To use flexbox, you need to set the display property of an element to "flex". You can do this by adding the following rule to your CSS: .container { display: flex; } The flex container will now have two main axes: the main axis and the cross axis. By default, the main axis runs horizo...

   JUSTIFY-CONTENT,FLEX,CSS     2022-12-25 06:44:34

  CSS3 animation vs CSS3 transition

Both CSS3 animation and CSS3 transition can be used to transition an element in a webpage. They can be used to transition some CSS properties within a given period of time. They have many similarities. They do have a few differences as well. So an user needs to understand the differences between them in order to better use them in different scenarios. First, let's see an example on how to change the width of a div from 100px to 200px within 2 seconds when hovering on it. With CSS3 animation , th...

   CSS3 animation,CSS3 transition, Difference     2015-06-15 08:46:39

  How ScrollerJS works

ScrollerJS is a light weight number scroller module to be embedded in web apps. It provides fancy number scrolling animations. ScrollerJS supports both CSS transition and DOM animation to handle the animation needed. If CSS transition is supported in a browser, CSS transition will be the preferred option for animation. If in old browsers where CSS transition is not supported. DOM animation will be chosen automatically. How does the number scrolling actually work? To transition a number from 0 to...

   ScrollerJS,JavaScript,CSS,GitHub     2015-06-11 06:54:44

  CSS Selector for Web Scraping

Creating a web scraper is no easy task. This is because it requires precision to identify the specific data points that we intend to collect for the end goal we are working towards.  Whether we are looking to create a marketing content database or analyze market trends, the last thing we need from our scraper is for it to return a lot of unnecessary data that will not help our cause. To avoid the inconvenience of going through huge amounts of data to get what we requested, it is crucial to ...

   CSS,WEB DESIGN,SELECTOR     2023-02-20 07:32:53

  Use CSS calc to align an element vertically

calc function is a function introduced in CSS3, it can be used to calculate length values. There are a few good features which make it suitable for aligning an element vertically. One good part is that the operands can have different units like percentage, px, rem etc. This makes it very flexible when calculating the length value. One example: .rect{ margin-top:20px; height:50px; background:green; width:calc(100%-20px); } Here the left operand uses percentage while the right one ...

   CSS3,CALC,VERTICAL ALIGN     2019-08-23 20:30:23

  CSS Animation vs. JavaScript: Which One Is Better?

You know that there are two ways of creating animations on the web: with CSS and JavaScript. And, their selection completely depends on the dependencies of the project. But many web developers hold a wrong perception that CSS is the only way of creating the animations. In fact, CSS has established as the most pampered system of the web development industry and most of the developers recommend it because it is mobile-friendly and powerful system. No doubt CSS is good, but JavaScript is the best....

   CSS animation, JS animation     2015-07-24 02:45:01

  Use of @font-face

Almost all web browsers(including the dinosaur browser IE6) support the web font property @font-face. Its usage is: @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } Now we...

   CSS,@font-face     2014-06-08 07:17:34

RECENT