���܂����g����CSS3�e�N�j�b�N�W�I �R�s�y�p�T���v���t���I�F�ꌂ�f�U�C���̎햾�����i16�j�i1/3 �y�[�W�j

�ʔ��@�l�J���b�N���T�C�g���j���[�A���I

�@�����Ȃ��O�݂��ŋ��k�ł����A���N�̉āA�ʔ��@�l�J���b�N���R�[�|���[�g�T�C�g��2�N�Ԃ�Ƀ��j���[�A�����܂����B

�@�u���E��X�V�p�x�������A�J���b�N�̊������ЂƖڂŕ�����R�[�|���[�g�T�C�g�v���R���Z�v�g�ɁA�“ǐ��������e�ʂ��y���T�C�g�Ɏd�グ�܂����B

�ʔ��@�l�J���b�N�R�[�|���[�g�T�C�g2011

�@�ЂƖڌ��邾���ŁA�ŋ߂̃J���b�N�̓�����������悤�Ƀj���[�X��TOP�y�[�W���\�����A���X���A���^�C���ɃJ���b�N�̍ŐV�̏��𔭐M���܂��B

�@�Z�p�I�ɂ́A�u���E�U�̃E�B���h�E�T�C�Y�ɂ���Ċg�k����摜�̓x�N�^�[�t�@�C���ł���SVG�iScalable Vector Graphics�j�摜�Œu����������iSVG�̓x�N�g���`���̉摜�̂��߁A�g�債�Ă��{�P�Ȃ��j�ACSS3��p���邱�Ƃʼn摜�̎g�p���ɗ͍T�����肷��ȂǁA�y�[�W�̌y�ʉ����������Ă��܂��B

�J���b�N�T�C�g��CSS�e�N�j�b�N���ۂ��Ɠ`���I

�@�{�e�ł́A�T�C�g���j���[�A���ɗp�����Z�p�̒��ł��A���ɁuCSS3�v�ɏœ_�𓖂āA��̓I�ȃe�N�j�b�N������ƃT���v���������ĉ�����܂��B

HTML1�\�[�X�ACSS3�ł̃}���`�f�o�C�X�Ή�

�@�J���b�N�T�C�g�ł́A����܂�JavaScript��Flash�ōs���Ă����悤�ȃA�j���[�V�����G�t�F�N�g��A1�‚�HTML�\�[�X�ł̃}���`�f�o�C�X�Ή��Ȃǂ�CSS3��p���čs���Ă��܂��BCSS3���g�p���邱�ƂŁA�v���O���~���O�̒m�����Ȃ��f�U�C�i�[�ł��ȒP�Ƀ��b�`�ȃT�C�g���쐬�ł��܂��B

�J���b�N�T�C�g�Ŏg�p����
CSS3�e�N�j�b�N�̂��ׂĂ����J���܂�!!!!!!!

�@�{�e�ŏЉ��CSS3�e�N�j�b�N

�� ���̋L����CSS3���L���T�|�[�g���Ă��� Google Chrome��Safari�ʼn{�����邱�Ƃ������߂��܂��iInternet Explorer���ȉ��FIE���Ȃ�CSS3�̃T�|�[�g���̒Ⴂ�u���E�U�ł́A�������ϗ��ł��Ȃ��ꍇ������܂��j�B

CSS3���g���Ƃ��ɋC��t����_

�@CSS3�̓o��ŁA�p�ۂ�O���f�[�V�������͂��߂Ƃ���A�]���ł͉摜��p����K�v�̂������f�U�C����CSS�݂̂ŕ\���ł���悤�ɂȂ�܂����B�����ڂ̑����ȊO�ɂ��A�V�����Z���N�^�̒lj���A�j���[�V�����ɂ�铮���̎w��ȂǁACSS�݂̂łł���͈͂��L�����Ă��܂��B

�@���݂ł͕��y���̍ł�����Web�u���E�U�ł���IE�̃T�|�[�g�͈͂��������߁A�g�p�ł���V�`���G�[�V���������肳��Ă��܂��Ă��܂����A�߂�����CSS3�͕��ʂɎg�p�����Z�p�ɂȂ�ł��傤�B

�Ή����Ă���Web�u���E�U�́H

CSS3��Web�u���E�U�ʑΉ���

�@�e�u���E�U��CSS3�̑Ή��󋵂͏�}�̂悤�ɂȂ��Ă��܂��B����ɏڂ���������A�p�����ł̍l�����Ȃǂ��O��̋L���u�N���X�u���E�U�͂����Â��IHTML5�{CSS3����̃v���O���b�V�u�E�G���n���X�����g�v�ʼn�����Ă��܂��I

�x���_�v���t�B�b�N�X���‚���

�@CSS3�̑����̃v���p�e�B�́u-webkit-�v��u-moz-�v�Ȃǂ̃x���_�v���t�B�b�N�X��p�����w���������K�v������܂��B�x���_�v���t�B�b�N�X�̏ڂ�������ɂ‚��Ă��O��̋L�����������������B

�}�E�X�I�[�o�[�ŃX���C�h�A�E�g�A�X���C�h�C��

�@�J�[�\�����悹��Ɖ摜���X���C�h�A�E�g���A���ɏd�˂Ă����v�f��������A�Ƃ���CSS3�e�N�j�b�N���Љ�܂��B�i�g�p��F ���ЃT�[�r�X�y�[�W�j

�J�[�\�����悹��ƁA�摜���X���C�h�A�E�g���ĉ��ɏd�˂Ă����e�L�X�g��������B

�@�}�E�X�I�[�o�[�ʼn摜���X���C�h�A�E�g���܂��B�]���ł���΁AJavaScript��p���čs���Ă����悤�ȉ��o�ł����ACSS�����Ŏ����ł���悤�ɂȂ�܂����B

�@�H�v����΂��낢�뉞�p�ł������ł��ˁB

���ۂɂ‚����Ă݂悤�I

�@��̓I�ȍ쐬���@��������܂��BCSS3�́utransition�v�Ƃ����v���p�e�B���g�p���A�u:hover�v�^���N���X�ł�CSS�v���p�e�B�̕ω��ɃA�j���[�V�����������Ă��܂��B

�@�T���v���R�[�h���ȉ��ɗp�ӂ��܂����I

CSS�ŃX���C�h�A�E�g�C�� - jsdo.it - share JavaScript, HTML5 and CSS

CSS3��p���č쐬�����A�}�E�X�I�[�o�[�ł̃X���C�h�A�E�g�A�X���C�h�C���̃G�t�F�N�g�̃T���v���B���X���C�h�i��j�Ə�X���C�h�i���j

�@�Đ��{�^�����N���b�N���Ă����������A�E���́uPlay�v�{�^�����N���b�N���Ă��������ƁA�R�[�h�̎��s���ʂ��m�F�ł��܂��B����ɁA�v���r���[���ɉE���́uStop�v�{�^�����N���b�N����ƁA�R�[�h���m�F�ł��܂��i���̌�A�o�ꂷ��T���v���R�[�h����������ʼn{���ł��܂��I�j�B

�쐬����Ƃ��̃|�C���g

• a�v�f�̒���img�v�f�𓮂���

�@img�v�f���������Ă���a�v�f�ɃJ�[�\�������ƁAimg�v�f����⍶�ɃX���C�h����悤�Ɏw�肵�Ă��܂��B�utransition: 0.3s ease-in-out;�v���w�肵�A�}�E�X�I�[�o�[�ł̃v���p�e�B�ω���0.3�b�̃A�j���[�V�����������Ă��܂��B

.box a img {
    display: block;
    position: relative;
    top: 0; /* �摜�̏����ʒu */
    left: 0;
    �@�@�@�@�@�@�@�@�@�@�@�@�@
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    /* CSS3�i�v���p�e�B�̕ω��ɃA�j���[�V������������j */
}
.box.left a:hover img {
    left: -100%; /* a:hover����img�����ɃX���C�h���� */
}
.box.top a:hover img {
    top: -100%; /* a:hover����img����ɃX���C�h���� */
}

�@�T���v���ł́Aa�v�f�𓮂����̂ł͂Ȃ��Aa�v�f�̎q�v�f�ł���img�v�f���X���C�h�����Ă��܂��Ba�v�f���g���X���C�h�����邱�Ƃ��”\�ł����Aa�v�f�͈̔͂ɂ���Ă̓N���b�N���Ă������N�����삵�Ȃ��Ȃ�Ȃǂ̃o�O��������̂ŁA���ӂ��K�v�ł��B

• ��яo��img�v�f�͐e�v�f�uoverflow: hidden;�v�ʼnB���B

.box a {
    display: block;
    overflow: hidden; /* �X���C�h���Ĕ�яo��img�v�f���B�� */
    position: absolute;
    z-index: 10;
    width: 200px;
    height: 150px;
}

�@img�v�f���������Ă���a�v�f�Ɂuoverflow: hidden;�v���w�肷�邱�ƂŁA�X���C�h�A�E�g��ɔ�яo����img�v�f���}�X�N���܂��B