Squadedit – éditer vos codes en temps réel

Younes ADIL — Thu, 26 Jan 2012 10:26:52 +0000

Squad est un outil qui plaira aux programmeurs seulement. Dans les termes les plus généraux disponibles, il permet d’éditer le code en temps réel.

Tout ce qu’il faut pour y aller est un ordinateur branché à Internet et la création d’un compte au préalable.

Plusieurs langues sont déjà supportées, et cela inclut HTML, CSS, Javascript et PHP parmi plusieurs autres.

Squad peut être employée à la fois comme un éditeur HTML ou PHP, et aussi comme un éditeur de texte si vous voulez.

Comment réaliser le logo Twitter entièrement en CSS ni image ni JS

Younes ADIL — Mon, 31 Oct 2011 11:39:40 +0000

C’est pas une blague mais c’est possible de réaliser le logo de Twiiter et autre logos à l’aide du HTML et CSS pas besoin d’un fichier graphique en utilisant uniquement du code, et voici comment :

HTML

CSS

.canvas {
border-radius: 5px;
box-shadow: 0 1px 0 rgba(250,250,250,0.2) inset, 0 2px 2px RGBA(0,0,0,0.5);
height: 300px;
overflow: hidden;
position: relative;
text-indent:-9999px;
width: 530px;
z-index: 10;
}
.icon, .icon * {
position: absolute;
}
#twitter .canvas {
background: #33ccff;
}
#twitter .icon {
height: 200px;
left:105px;
position: absolute;
top:50px;
width:290px;
}
#twitter .draw {
background: white;
opacity:1.6;
}
#twitter .mask {
background: #33ccff;
opacity:1.6;
}
.twitter1, .twitter3 {
border-radius:56px/33px;
height:33px;
width:56px;
}
.twitter1 {
clip: rect(17px 70px 40px 0);
	left: 234px;
	top: 72px;
	-moz-transform: skewy(-4deg);
	-webkit-transform: skewy(-4deg);
	transform: skewy(-4deg);
}
.twitter3 {
clip:rect(18px 70px 40px 0);
left:232px;
top:56px;
-moz-transform: skewy(-5deg);
-webkit-transform: skewy(-5deg);
transform: skewy(-5deg);
}
.twitter2, .twitter4 {
border-radius:38px/10px;
height: 10px;
width:38px;
}
.twitter2 {
left:254px;
top:83px;
-moz-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
transform:rotate(5deg);
}
.twitter4 {
left:251px;
top:67px;
}
.twitter5 {
border-radius: 148px;
clip: rect(0 150px 72px 60px);
height: 148px;
left: 109px;
top: 16px;
width: 148px;
}
.twitter6 {
border-radius: 258px/167px;
bottom: 0;
clip: rect(50px 120px 170px 0px);
height: 167px;
left: -5px;
width: 258px;
}
.twitter7 {
border-radius: 259px/208px;
bottom: 0;
clip: rect(91px 260px 220px 117px);
height: 208px;
left: -3px;
-moz-transform: skewx(-5deg);;
-webkit-transform: skewx(-5deg);
transform: skewx(-5deg);
width: 259px;
}
.twitter8 {
border-radius: 149px;
height: 149px;
left: -22px;
top: 16px;
width: 149px;
}
.twitter9, .twitter10 {
border-radius: 63px/157px;
height: 157px;
width: 63px;
}
.twitter9 {
clip:rect(49px 20px 160px 0px);
left: 149px;
top: -20px;
-moz-transform: rotate(27deg);
-webkit-transform: rotate(27deg);
transform: rotate(27deg);
}
.twitter10 {
clip:rect(26px 20px 50px 0px);
left: 149px;
top: -20px;
-moz-transform: rotate(27deg);
-webkit-transform: rotate(27deg);
transform: rotate(27deg);
}
.twitter11 {
height: 10px;
left: 182px;
top: 3px;
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
width: 10px;
}
.twitter12 {
border-radius: 8px/30px;
height: 30px;
left: 198px;
top: -3px;
-moz-transform: rotate(66deg);
-webkit-transform: rotate(66deg);
transform: rotate(66deg);
width: 8px;
}
.twitter13 {
border-radius: 7px 13px 0 0/64px;
height: 44px;
left: 180px;
top: -8px;
-moz-transform: rotate(53deg);
-webkit-transform: rotate(53deg);
transform: rotate(53deg);
width: 9px;
}
.twitter14 {
border-radius: 27px 137px 137px 137px/50px;
clip: rect(0 130px 7px 14px);
height: 50px;
left: 29px;
top: 47px;
-moz-transform: rotate(24deg) skewx(32deg);
-webkit-transform: rotate(24deg) skewx(32deg);
transform: rotate(24deg) skewx(32deg);
width: 137px;
}
.twitter15 {
border-radius: 36px/58px;
clip: rect(14px 8px 60px 0);
height: 58px;
left: 48px;
top: 5px;
-moz-transform: rotate(-31deg);
-webkit-transform: rotate(-31deg);
transform: rotate(-31deg);
width: 36px;
}
.twitter16 {
clip: rect(0px 30px 3px 0);
border-radius: 30px/10px;
height: 10px;
left: 50px;
top: 59px;
width: 30px;
}
.twitter17   {
clip: rect(31px 76px 62px 0);
border-radius: 80px/62px;
height: 62px;
left: 51px;
top: 31px;
-moz-transform: skewx(10deg);
-webkit-transform: skewx(10deg);
transform: skewx(10deg);
width: 80px;
}
.twitter18 {
clip: rect(0px 30px 7px 0);
border-radius: 30px/20px;
height: 20px;
left: 64px;
top: 91px;
width: 30px;
}
.twitter19 {
clip: rect(16px 40px 34px 0);
border-radius: 40px 40px 40px 40px/34px;
height: 34px;
left: 65px;
top: 81.5px;
-moz-transform: skewx(23deg);
-webkit-transform: skewx(23deg);
transform: skewx(23deg);
width: 40px;
}
.twitter20 {
border-radius: 40px 60px/34px;
height: 34px;
left: 86px;
top: 109px;
-moz-transform: rotate(-20deg) skewx(10deg) scale(0.9);
-webkit-transform: rotate(-20deg) skewx(10deg) scale(0.9);
transform: rotate(-20deg) skewx(10deg) scale(0.9);
width: 50px;
}
.twitter21 {
background: none !important;
border: 56px solid white;
border-right: 59px solid transparent;
border-top: 33px solid transparent;
height: 0;
left: 77px;
top: 30px;
-moz-transform: skewx(30deg);
-webkit-transform: skewx(30deg);
transform: skewx(30deg);
width: 0;
}
.twitter22 {
background: none !important;
border: 20px solid transparent;
border-right-color: white;
border-bottom-color: white;
top: 54px;
left: 130px;
}

neptisblog » html

Squadedit – éditer vos codes en temps réel

Comment réaliser le logo Twitter entièrement en CSS ni image ni JS

HTML

CSS