読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:VisualforceとCSS3

ドットインストールというサイトでCSS3の基礎を勉強しました。角丸とかアニメーションとか面白い機能の実装方法を勉強したのでVisualforceページで試してみることに。CSS3は古いブラウザによっては正常に認識されないとのことなので実際に使用することは少ないかもしれないのですがやってみて面白かったです。

f:id:tyoshikawa1106:20130104191150p:plain

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>


参考サイト

3分動画でマスターする初心者向けプログラミング学習サイト - ドットインストール