ドットインストールというサイトでCSS3の基礎を勉強しました。角丸とかアニメーションとか面白い機能の実装方法を勉強したのでVisualforceページで試してみることに。CSS3は古いブラウザによっては正常に認識されないとのことなので実際に使用することは少ないかもしれないのですがやってみて面白かったです。
Divタグを角丸の処理を使用して円形に変更する処理をベースに、グラデーションや回転、アニメーションを試したものでブラウザはGoogle Chromeを対象にしています。Sample8はマウスを当てた際にアニメーションが実行されるようになっています。
<apex:page title="CSS3の勉強">
<head>
<style>
/* オレンジの円を表示(影付き) */
.Sample1 {
display: table-cell;
width:100px;
height:100px;
margin: 30px;
background-color:orange;
border: 2px solid orangered;
border-radius: 50%;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
text-align: center;
vertical-align: middle;
text-shadow: 1px 1px 0px white, 2px 2px 0px black;
font-size: 24px;
font-weight: bold;
}
/* グラデーション① */
.Sample2 {
background: -webkit-linear-gradient(45deg, orange, mistyrose);
}
/* グラデーション② */
.Sample3 {
background: -webkit-radial-gradient(orange 30%, mistyrose 10%, yellow );
}
/* グラデーション③ */
.Sample4 {
background: -webkit-radial-gradient(10px 10px, orange, mistyrose);
}
/* X軸に変形 */
.Sample5 {
-webkit-transform:scaleX(1.2);
}
/* Y軸に変形 */
.Sample6 {
-webkit-transform:scaley(1.2);
}
/* 45度回転 */
.Sample7 {
-webkit-transform:rotate(45deg);
}
/* マウスオーバー時 */
#s8:hover{
width: 200px;
background-color: red;
}
/* アニメーション */
.Sample8 {
/*
-webkit-transition-property: all;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease;
-webkit-transition-delay: 0.5s;
*/
-webkit-transition: all 1s ease 0.5s;
}
/* キーフレームでアニメーション① */
.Sample9 {
/*
animation-name:
animation-duration:
animation-timing-function:
animation-delay:
animation-iteration-count:
animation-direction:
*/
-webkit-animation:'animationTest' 5s ease 1s infinite alternate;
}
/* キーフレーム */
@-webkit-keyframes 'animationTest' {
0% {width: 100px; background-color:orange;}
100% {width: 200px; background-color: red;}
}
</style>
</head>
<body>
<apex:form >
<div id="s1" class="Sample1">
<apex:outputText value="Sample1" />
<br/>
<apex:outputText value="A" />
</div>
<div id="s2" class="Sample1 Sample2">
<apex:outputText value="Sample2" />
<br/>
<apex:outputText value="B" />
</div>
<div id="s3" class="Sample1 Sample3">
<apex:outputText value="Sample3" />
<br/>
<apex:outputText value="C" />
</div>
<div id="s4" class="Sample1 Sample4">
<apex:outputText value="Sample4" />
<br/>
<apex:outputText value="D" />
</div>
<br/>
<hr/>
<br/>
<div id="s5" class="Sample1 Sample5">
<apex:outputText value="Sample5" />
<br/>
<apex:outputText value="E" />
</div>
<div id="s6" class="Sample1 Sample6">
<apex:outputText value="Sample6" />
<br/>
<apex:outputText value="F" />
</div>
<div id="s7" class="Sample1 Sample7">
<apex:outputText value="Sample7" />
<br/>
<apex:outputText value="G" />
</div>
<br/>
<hr/>
<br/>
<div id="s8" class="Sample1 Sample8">
<apex:outputText value="Sample8" />
<br/>
<apex:outputText value="H" />
</div>
<br/>
<hr/>
<br/>
<div id="s9" class="Sample1 Sample9">
<apex:outputText value="Sample9" />
<br/>
<apex:outputText value="I" />
</div>
</apex:form>
</body>
</apex:page>参考サイト
