Creating a transparent triangle in CSS

Here is a way to achieve a transparent arrow using only this CSS border principle :

See the Pen YZRYrY by habai (@jhabai) on CodePen.

Exploring further into CSS arrows/triangles

• http://www.bellami.fr/triangles-css
• http://apps.eky.hk/css-triangle-generator/

L’article Transparent arrow in CSS (CSS triangle, borders) est apparu en premier sur Ice Development.

With conditions, it’s possible to check certain information in our SCSS file. For example, if the color is equal to orange, then we define new parameters:

Generated CSS :

Thanks to this condition, it’s possible to change the value of $shadow by setting $color. In this example, we check the value of $color, however, several other comparisons are possible. Discover all the control directives of SASS.

Loops

Loops allow you to repeat an instruction as many times as you want.

Loops @for

Generated CSS :

Loops @while

Generated CSS :

Loops @each

Generated CSS :

This list can be defined in a variable (comparable to arrays in PHP). Each value must be separated by a comma.
Example: $var: puma, sea-slug, egret, salamander;

L’article SASS – Lesson 5 : Conditions and Loops est apparu en premier sur Ice Development.

A mixin is a piece of customizable and reusable code anywhere in your SASS file. Like a function, a mixin can take parameters.

Mixin with parameters

Thanks to mixins, you will be able to generate several dozen lines of CSS with a single (configurable or not) line in SCSS !

Example :

Compiled CSS file:

SASS does not integrate any predefined mixin. However, this is one of the strengths of Compass, which offers a hundred mixins ready to use: Compass Mixins.

Functions

The difference between a mixin and a function is the result returned once compiled. A mixin can generate several lines of CSS code while a function will only return a value.

Thanks to functions, you will be able to calculate the percentage of a block, convert a “px” unit to “em/rem,” or even lighten a color.

Find the complete list of SASS and Compass functions.

L’article SASS – Lesson 4 : Mixins and Functions est apparu en premier sur Ice Development.

To use a variable, you must declare it with the “$” sign followed by its name and value: $background: rgba(black, .2);

Once declared, the variable can be called anywhere in the document, even if it is defined in a file imported using @import.

Generated CSS code :

The use of a variable has no limit; you can call it as many times as you wish. It is also possible to use a variable in a mixin, a function, or loops.

Use case of a boolean variable in SASS

In the SASS – Lesson 2 post, we explained that it’s possible to organize your CSS in a modular way.
Thanks to boolean variables, you can activate or deactivate a partial or a portion of SASS code.

With $use-slider set to “false”, the code inside the condition will not be compiled.

L’article SASS – Lesson 3 : Variables est apparu en premier sur Ice Development.

With SASS, it’s possible to organize your project into multiple files, which will be imported and compiled into a single minified CSS file.
This is made possible thanks to partials.

SASS partials

The name of a partial always begins with an underscore.
Ex : _reset.scss

Without this underscore, SASS would generate an additional file reset.css.

SCSS code from the _reset.scss file :

SCSS code from the main file style.scss :

Compiled CSS :

Thanks to the @import rule, you can opt for a modular organization, which will allow you to have a better-structured code that is easier to maintain (which is found in the SMACSS philosophy).

L’article SASS – Lesson 2 : Divide and conquer, refactoring est apparu en premier sur Ice Development.

Rule nesting example with a link color and its hover and focus states :

Compiled CSS :

Nesting will help you have a clean, logical, and well-organized code, which should be easier to maintain over time.

Of course, it’s possible to use nesting in any case. Example with media queries : Example with media queries :

Compiled CSS :

L’article SASS – Lesson 1 : Nesting Rules est apparu en premier sur Ice Development.

CSS Hat is a paid extension ($34.99) that allows you to produce your CSS much faster !

Here’s an example of its use in the HTML slicing of the main menu in red below :

1. Select your layer (note, the layer must contain styles! If you use a merged layer, the plugin will not work)
2. Open the dedicated CSS Hat window
3. Click on the “Copy” button

CSS Hat allows

• Generation in the following languages: classic CSS, LESS, SCSS (Compass), SASS, and Stylus
• Browser prefix generation
• Layer dimension generation
• CSS class generation

Where to find it ?

To buy CSS Hat, visit the official plugin website: csshat.com.

CSS Hat will save you a lot of time during your slicing, especially for complex buttons or for gradient backgrounds, as in the example above.

L’article Generate your style sheets more quickly with CSS Hat est apparu en premier sur Ice Development.

Prerequisites for exporting your icons in SVG format :

1. Install the script : save-ps-to-svg.jsx in the folderC:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Presets\Scripts
2. Start Photoshop and have Illustrator installed on your machine.

The screenshots below are taken on Photoshop CS6, but the export script for icons in SVG format should also work on CS5.
Source : http://hackingui.com/design/export-photoshop-layer-to-svg/

SVG export procedure :

1. Rename the layers to be exported by ending with .svg
   
2. Select the shape, press A (path selection tool) and click on merge shape components.
   
3. Run the script via File / Script, Illustrator will automatically launch and export one by one the .svg layers to the location where you saved your PSD.

L’article Exporting Icons as SVG from Photoshop est apparu en premier sur Ice Development.

Remember, if your client is on Windows XP, their version of Internet Explorer will be at most version 8.

Our PHP script detects if the version of Internet Explorer is outdated. If so, a message prompts the user to switch to a more efficient, secure, and up-to-date browser!

How to use it ?

We recommend using this code on the login page of your administration. Just copy/paste this code right after the tag, after retrieving the script below :

For the record, additional comments are no longer taken into account from version 10 onwards. The above code will therefore only execute on versions equal to or lower than Internet Explorer 9.

Preview of the message displayed for an IE8 user

Download the files for Symfony 2 : https://github.com/reficedev/alert-ie-sf2

L’article PHP script to warn the Internet user of the use of an obsolete browser (PHP Procedural + Symfony2) est apparu en premier sur Ice Development.

L’article How to detect a click everywhere except on a specific HTML element in jQuery est apparu en premier sur Ice Development.