Mozilla & Open Web

Created by Mermi / @manelbutterfly

Tell me About you

Mozilla is more than
code

Collaborate

Inspire

Make

we Are everywhere

Mozilla Product

Mozilla Webmaker

Mozilla Webmaker Offers

  • Tools
  • Projects
  • Community

Webmaker Tools

Better Semantic tags


	
	



		
Page title

		
Page subtitle








	

		

			
Title

		

		

			Content...
		

	






	
	
Chart 1.1





	Copyright ©
	.

Markup for Applications

You see an autocomplete menu 

						
A+
						
					
						
working...
						
					
						
3/4 complete

New Form Type

Audio & Video

							

document.getElementById("audio").muted = false;
							
						
							

document.getElementById("video").play();

Track Element

CSS Selectors

			
.row:nth-child(even) {
background: #dde;
}
.row:nth-child(odd) {
background: white;
}

Selectors

			
	div {
		display: inline-block;
	}

Image like Display

		
input[type="text"] {
background: #eee;
}

Specific attributes

		
:not(.box) {
	color: #00c;
}
:not(span) {
	display: block;
}

Negation

Webfonts

		
@font-face {
	font-family: 'LeagueGothic';
	src: url(LeagueGothic.otf);
}

@font-face {
	font-family: 'Droid Sans';
	src: url(Droid_Sans.ttf);
}
header {
	font-family: 'LeagueGothic';
}

Text Wrapping

		
div {
		text-overflow: ellipsis;
}

Columns

		
	-webkit-column-count: 3;
	-webkit-column-rule: 1px solid #bbb;
	-webkit-column-gap: 2em;

Opacity

		
	color: rgba(255, 0, 0, 0.75);
	background: rgba(0, 0, 255, 0.75);

Hue/saturation/luminance color

		
color: hsla(
	178
	55%,
	42%,
	0.68);

Gradients

		
background-image: linear-gradient(top, #00abeb 0%, #fff 50%,
	#66cc00 50%, #fff 100%);
		
	
		
background-image: radial-gradient(center, circle cover, red, #000 40%);

Shadows

		
			text-shadow:
			rgba(64, 64, 64, 0.5)
			0px
			0px
			0px;
		
	
		
			box-shadow:
			rgba(0, 0, 128, 0.25)
			0px
			0px
			0px;

Background Enhancements

		
#logo {
	background: url(logo.gif) center center no-repeat;
	background-size:
		;
}

Background sizing

		
div {
	background: url(src/zippy-plus.png) 10px center no-repeat,
	url(src/gray_lines_bg.png) 0 center repeat-x;
	}

Multiple Background

For more information :

Thank you