css,Code片段,代码实例,代码示例,代码片段库

css 第16集React Scrimba

TodoItem.js

import React from "react"

function TodoItem() {
    return (
        <div className="todo-item">
            <input type="checkbox" />
            <p>Placeholder text here</p>
        </div>
    )
}

export default TodoItem

App.js

import React from "react"
import TodoItem from "./components/TodoItem"

function App() {
    return (
        <div className="todo-list">
            <TodoItem />
            <TodoItem />
            <TodoItem />
            <TodoItem />
        </div>
    )
}

export default App

TodoItem.css

body {
    background-color: whitesmoke;
}

.todo-list {
    background-color: white;
    margin: auto;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #efefef;
    box-shadow:
    /* The top layer shadow */
        0 1px 1px rgba(0,0,0,0.15),
            /* The second layer */
        0 10px 0 -5px #eee,
            /* The second layer shadow */
        0 10px 1px -4px rgba(0,0,0,0.15),
            /* The third layer */
        0 20px 0 -10px #eee,
            /* The third layer shadow */
        0 20px 1px -9px rgba(0,0,0,0.15);
    padding: 30px;
}

.todo-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 30px 20px 0;
    width: 70%;
    border-bottom: 1px solid #cecece;
    font-family: Roboto, sans-serif;
    font-weight: 100;
    font-size: 15px;
    color: #333333;
}

input[type=checkbox] {
    margin-right: 10px;
    font-size: 30px;
}

input[type=checkbox]:focus {
    outline: 0;
}

css Toogle菜单 - 汉堡包

style.css

.nav-toggle .bar {
	height: 4px;
	border-radius: 000px !important;
	background: #111;
	position: absolute;
	left: 50%;
	margin-left: -15px;
	top: 50%;
	-webkit-transition: opacity .2s linear .2s, margin .2s linear .2s, -webkit-transform .2s linear 0s;
	-moz-transition: opacity .2s linear .2s, margin .2s linear .2s, -moz-transform .2s linear 0s;
	-o-transition: opacity .2s linear .2s, margin .2s linear .2s, -o-transform .2s linear 0s;
	transition: opacity .2s linear .2s, margin .2s linear .2s, transform .2s linear 0s;
}

.toggles {
	display: block;
	background: none;
	border: none;
	margin-top: 10px;
	z-index: 1002;
	width: 80px;
	margin: 0 auto;
	right: 0;
	bottom: 0;
	top: 0;
	cursor: pointer;
}

.nav-toggle .bar:nth-child(1) {
	margin-top: -15px;
}

.nav-toggle .bar:nth-child(3) {
	margin-top: 5px;
}

.open .nav-toggle .bar:nth-child(1),
.open .nav-toggle .bar:nth-child(3) {
	margin-top: -2px;
}
.mobil-m {
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	vertical-align: middle;
	display: flex;
	align-items: center;
	max-height: 0;
	overflow: hidden;
}

ul.mobile-menu {
	display: block !important;
	width: 100%;
	padding: inherit !important;
}

.mobile-menu li {
	border: none;
	text-align: right;
	position: relative;
}

.mobile-menu a {
	position: relative;
	padding: 10px 40px;
	text-align: center;
	display: table;
	margin: 0 auto;
	font-size: 1.2rem;
	left: 0;
	top: -5px;
}

.open .mobil-m {
	max-height: 100vh;
}


.open .nav-toggle .bar {
	background: #ca2017;
	-webkit-transition: opacity 0.2s linear 0s, margin 0.2s linear 0s, -webkit-transform 0.2s linear 0.2s;
	-moz-transition: opacity 0.2s linear 0s, margin 0.2s linear 0s, -moz-transform 0.2s linear 0.2s;
	-o-transition: opacity 0.2s linear 0s, margin 0.2s linear 0s, -o-transform 0.2s linear 0.2s;
	transition: opacity 0.2s linear 0s, margin 0.2s linear 0s, transform 0.2s linear 0.2s;
}

.open .nav-toggle .bar:nth-child(1),
.open .nav-toggle .bar:nth-child(3) {
	margin-top: -2px;
}

.open .nav-toggle .bar:nth-child(1) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

.open .nav-toggle .bar:nth-child(2) {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	opacity: 0;
	margin-left: 0;
	display: none;
}

.open .nav-toggle .bar:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

@media screen and (max-height: 600px) {
	

.open .mobile-menu {
    height: 500px;
    overflow: scroll !important;
    /* padding-top: 50px; */
}
	

	
}

css 过渡

style.css

.element {
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.element {
	-webkit-transition: all 1.5s ease-in-out;
	-moz-transition: all 1.5s ease-in-out;
	-ms-transition: all 1.5s ease-in-out;
	-o-transition: all 1.5s ease-in-out;
	transition: all 1.5s ease-in-out;
}

css 选择

style.css

::selection {
	background: none;
	color: #69d8cd !important;
	text-shadow: none;
	/* opacity: 1 !important; */
}

css 占位符

style.css

::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	color: #797979;
}

::-moz-placeholder {
	/* Firefox 19+ */
	color: #797979;
}

:-ms-input-placeholder {
	/* IE 10+ */
	color: #797979;
}

:-moz-placeholder {
	/* Firefox 18- */
	color: #797979;
}

css 悬停图像

style.css

img {
      -moz-transform: scale(1.05);
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
}

.element:hover img {
      -moz-transform: scale(1.02);
      -webkit-transform: scale(1.02);
      transform: scale(1.02);
}

css 媒体屏幕

style.css

@media screen and (min-width: 1024px) {}

@media screen and (max-width: 1800px) {}

@media screen and (max-width: 1600px) {}

@media screen and (max-width: 1500px) {}

@media screen and (max-width: 1400px) {
	html {
		font-size: 95%;
	}
}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {
	html {
		font-size: 90%;
	}
}

@media screen and (max-width: 960px) {}

@media screen and (max-width: 860px) {}

@media screen and (max-width: 768px) {}

@media (max-width: 600px) {
	html {
		font-size: 85%;
	}
}

@media screen and (max-width: 520px) {}

@media screen and (max-width: 480px) {
	html {
		font-size: 80%;
	}
}

@media screen and (max-width: 321px) {}

@media screen and (max-height: 800px) {}

@media screen and (max-height: 600px) {}

css 箱阴影（普遍的）

（参考サイト）<br/> https://saruwakakun.com/html-css/basic/box-shadow

index.html

<div class="sample">hoge</div>

style.css

.sample {
  padding: 20px;
  margin: 2em;
  max-width: 400px;/*無くてもOK*/
  background: #FFF;
  border-radius: 3px;
  box-shadow: 0 0px 20px rgba(0,0,0,0.2);
}

css UI主题

SET:
*, *:before, *:after {
  box-sizing: border-box;
}

:root {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: Josefin Sans, sans-serif;
  
  #app {
    min-height: 100vh;
  }
}

https://polaris.shopify.com/design/colors

https://htmlcolorcodes.com/color-picker/
[TINTS]

http://chir.ag/projects/name-that-color/
https://www.color-blindness.com/color-name-hue/

# Responsive breakpoints (Taken from Bootstrap)
https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

# Extra small devices (portrait phones, less than 576px)
# No media query for `xs` since this is the default in Bootstrap

# Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
# Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
# Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
# Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

[font]
Lato,sans-serif

[colors]
--window-bg-color-a: #8041ee;
--window-bg-color-b: #f476b7;
--dashboard-bg-lightest: #fff;
--dashboard-bg-lighter: #2d3759;
--dashboard-bg-main: #1c2237;
--dashboard-bg-darker: #141a2e;
--dashboard-bg-darkest: #171d31;
--dashboard-shadows: rgba(37,45,71,.34);
--color-data-1: #fb906f;
--color-data-2: #f16c9e;
--color-data-3: #95a6ff;
--color-data-4: #5e78fe;
--color-data-5: #df74f9;
--color-data-6: #b72cf6;
--color-data-7: #0df9a3;
--color-data-8: #f55753;
--color-data-9: #dd71f9;
--color-data-10: #fdcf44;
--color-main: #fff;
--color-light: hsla(0,0%,100%,.7);
--color-dark: #2c2c2c;
--color-error: #ff4a50;
--color-success: #06ffff;

css ホバー时，下にメニュー表示

（参考サイト）<br/> http://developer.co.jp/html/about_css3_news/view_63.html

index.html

<nav id="nav" class="g_nav">
                    <ul class="flex_box flex_between">
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">BUSINESS</a>
                            <ul class="subs">
                                <li><a href="#">Link 1Link 1Link 1</a></li>
                                <li><a href="#">Link 2</a></li>
                                <li><a href="#">Link 3</a></li>
                                <li><a href="#">Link 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">COMPANY</a>
                            <ul class="subs">
                                <li><a href="#">Link 1</a></li>
                                <li><a href="#">Link 2</a></li>
                                <li><a href="#">Link 3</a></li>
                                <li><a href="#">Link 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">RECRUIT</a>
                            <ul class="subs">
                                <li><a href="#">Link 1</a></li>
                                <li><a href="#">Link 2</a></li>
                                <li><a href="#">Link 3</a></li>
                                <li><a href="#">Link 4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
                </nav>

style.css

/*---------- プルダウンメニュー ----------*/

#nav .subs {
    text-align-last: left;
    width: 150%;
    display: none;
    float: left;
    left: 0;
    background: #0064b4;
    padding: 20px;
    position: absolute;
    top: 100%;
}

#nav li:hover>* {
    display: block;
}

#nav li:hover {
    position: relative;
}

#nav ul .subs {
    position: absolute;
    left: 0;
}

#nav ul .subs li {
    color: #fff;
}

#nav ul .subs li a {
    display: block;
}

#nav ul .subs li:not(:last-child) a {
    margin: 0 0 15px 0;
}

#nav a {
    float: left;
    font-size: 15px;
    min-width: 60px;
    text-align: center;
}