CSS Code Snippets

Useful CSS / CSS3 code snippets to style HTML elements, for page design, and Web Designers.

Animated Tooltip with HTML and CSS
- CSS code-snippet, example of an animated Tooltip made with HTML and CSS only.
Making Responsive IFRAMEs
- CSS code snippets for responsive iframe, both width and height. It works in desktop and mobile devices
Complex Shapes with a single DIV and CSS
- Complex Shapes with a single DIV and CSS properties, without image file
Heart shape with CSS
- Heart shape, created with a single DIV tag and CSS properties, without image
Yin-Yang with CSS
- Yin-Yang circle, created with a single DIV tag and CSS properties, without image
Egg shape with CSS
- Egg shape, created with a single DIV tag and CSS properties, without image
Clepsydra shape with CSS
- Clepsydra shape, created with a single DIV tag and a few CSS properties
TV-Screen shape with CSS
- TV-Screen shape, created only with a single DIV tag and a CSS properties
Diamond shape with CSS
- Two diamond shapes, simple created with a single DIV tag and CSS properties
Buttons with CSS
- Buttons created only with CSS, CSS3 properties, without using image file
Star shapes with CSS
- Star shapes, 5, 6, 8 and 12 points, created with a single DIV tag and CSS properties
Polygons with CSS
- Various Polygons shapes with CSS properties, Parallelogram, Pentagon, Hexagon, Octagon
Circle and Oval with CSS
- Circle and Oval shapes created with a single HTML DIV tag and CSS properties
Triangles with CSS
- Various Triangle shapes with CSS properties, triangle up, down, left, right
CSS Rhombus Shape
- CSS Rhombus Shape, create a rhombus with a DIV and CSS properties
CSS Trapezoid Shape
- CSS Trapezoid Shape, create a trapezoid with a DIV and CSS properties
Making DIV Contents Scroll Horizontally, with multiple Div`s inside
- Making DIV Contents Scroll Horizontally, with multiple Div`s inside. CSS code-snippets
Center Fixed and Absolute element
- How to center a fixed, or absolute HTML element, Div or other block element
Transparent Background, but not the text-content on it
- Transparent Background Color, and transparent image, with CSS, but not the text-content on it
Tabs effect with CSS
- Tabs effect with CSS. A single content divided into multiple sections, each associated with a header (or tab) in a list, that can be swapped to save s

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which HTML element can be used to embed a SWF flash content?

<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>

Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?

:active :focus :hover

input:focus {
  background-color: #88fe88;
}

Click on the instruction which converts a JSON string into a JavaScript object.

JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)

var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);

Indicate the PHP function which can be used to create or write a file on server.

fopen() file_put_contents() file_get_contents()

if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";

Last accessed pages

JavaScript Course - Free lessons ^(31647)
Volume and Surface Area Calculator for 3D objects ^(11276)
Using v-model in form input fields ⁽¹⁰⁵¹⁾
jQuery UI draggable - Drag elements ^(11445)
Display data from PHP Array, or MySQL in HTML table ^(26980)

Popular pages this month

Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS ⁽³¹⁰⁾
The Mastery of Love ⁽⁴⁸⁾
CSS cursor property - Custom Cursors ⁽³⁶⁾
Read Excel file data in PHP - PhpExcelReader ⁽³⁵⁾
PHP-MySQL free course, online tutorials PHP MySQL code ⁽³¹⁾