Ảnh nền css cảm xúc

Question

Để cung cấp cho phần tử một nền gradient tuyến tính, hãy sử dụng một trong các tiện ích backgroundImage="gradient-to-{direction}", kết hợp với các tiện ích dừng màu gradient

Nội dung chính Show

Phản ứng nhanh nhẹn
Cảm xúc là gì và tại sao lại có cảm xúc?
điều kiện tiên quyết
Cài đặt
Thành phần
Cách sử dụng
Kết quả
Phần kết luận
Tại sao tôi nên sử dụng CSS cảm xúc?
CSS cảm xúc là gì?
Cốt lõi cảm xúc là gì?

<x.div
  backgroundImage="gradient-to-r"
  gradientFrom="orange-400"
  gradientVia="red-500"
  gradientTo="pink-500"
/>

Phản ứng nhanh nhẹn

Để kiểm soát hình nền tại một điểm ngắt cụ thể, hãy sử dụng ký hiệu đối tượng đáp ứng. Ví dụ: thêm thuộc tính backgroundImage={{ md: "url(...)" }} vào một thành phần sẽ áp dụng tiện ích backgroundImage="url(...)" ở kích thước màn hình trung bình trở lên

<x.div backgroundImage={{ md: 'url(...)' }} />

Để biết thêm thông tin về các tính năng thiết kế đáp ứng của xstyled, hãy xem tài liệu về Thiết kế đáp ứng

Blog này giúp bạn xây dựng các thành phần nút có thể tái sử dụng đơn giản và bạn sẽ biết về cách viết CSS trong thư viện Js. Và cách truy cập các đạo cụ vào thành phần của bạn và thay đổi kiểu dựa trên đạo cụ

Cảm xúc là gì và tại sao lại có cảm xúc?

Emotion là một thư viện css-in-js nhẹ, hiệu suất cao. Nó cung cấp các tác phẩm phong cách có thể dự đoán động ngoài việc có được trải nghiệm. cảm xúc có hiệu quả cao, hoạt động tốt và chúng tôi có thể sử dụng từng thư viện cho mục đích sử dụng cụ thể

điều kiện tiên quyết

HTML
CSS
Javascript + ES6
Phản ứng

Cài đặt

Có hai gói, một là @emotion/core và một gói khác cung cấp năng lượng cho các thành phần được tạo kiểu @emotion/styled. Chúng ta sẽ xem các ví dụ cho cả hai

# Create a project named EmotionApp

yarn add @emotion/core
yarn add @emotion/styled
         or
npm i @emotion/styled @emotion/react  #// for react application

phong cách toàn cầu trong cảm xúc

Trước khi bắt đầu các kiểu trang web, chúng tôi luôn cần thiết lập lại để chuẩn hóa các kiểu mặc định của trình duyệt. Tôi sẽ sử dụng bình thường hóa. css

Đây là tùy chọn nếu bạn muốn, bạn có thể sử dụng cái này. Điều này giống như thiết lập lại. scss. Nếu không có điều này, bạn cũng sẽ tạo các thành phần

//Adding global CSS
import { Global, css } from "@emotion/core"
//importing the text from normalize.css file
import normalize from "normalize.css"

const App = () => {
  return (
    <>
      <Global
        styles={css`
          ${normalize}
          body {
            background-color: #fafafa;
          }
        `}
      >
        ...Content
      </Global>
    </>
  )
}

Ở đây chúng tôi đã thêm CSS được chuẩn hóa cùng với màu nền cho phần tử cơ thể. Chúng tôi có thể thêm bất kỳ CSS toàn cầu phổ biến nào như thế này vào cảm xúc

Tạo một thành phần nút có thể tái sử dụng

Nút là thành phần tương tác quan trọng nhất được người dùng sử dụng để thực hiện các hành động. Có nhiều loại nút khác nhau như primary, secondary, success, large, extraLarge,

//Adding global CSS
import { Global, css } from "@emotion/core"
//importing the text from normalize.css file
import normalize from "normalize.css"

const App = () => {
  return (
    <>
      <Global
        styles={css`
          ${normalize}
          body {
            background-color: #fafafa;
          }
        `}
      >
        ...Content
      </Global>
    </>
  )
}

0,

//Adding global CSS
import { Global, css } from "@emotion/core"
//importing the text from normalize.css file
import normalize from "normalize.css"

const App = () => {
  return (
    <>
      <Global
        styles={css`
          ${normalize}
          body {
            background-color: #fafafa;
          }
        `}
      >
        ...Content
      </Global>
    </>
  )
}

1. chúng ta có thể đưa ra các trọng âm như

//Adding global CSS
import { Global, css } from "@emotion/core"
//importing the text from normalize.css file
import normalize from "normalize.css"

const App = () => {
  return (
    <>
      <Global
        styles={css`
          ${normalize}
          body {
            background-color: #fafafa;
          }
        `}
      >
        ...Content
      </Global>
    </>
  )
}

2,

//Adding global CSS
import { Global, css } from "@emotion/core"
//importing the text from normalize.css file
import normalize from "normalize.css"

const App = () => {
  return (
    <>
      <Global
        styles={css`
          ${normalize}
          body {
            background-color: #fafafa;
          }
        `}
      >
        ...Content
      </Global>
    </>
  )
}

3,

//Adding global CSS
import { Global, css } from "@emotion/core"
//importing the text from normalize.css file
import normalize from "normalize.css"

const App = () => {
  return (
    <>
      <Global
        styles={css`
          ${normalize}
          body {
            background-color: #fafafa;
          }
        `}
      >
        ...Content
      </Global>
    </>
  )
}

4,

//Adding global CSS
import { Global, css } from "@emotion/core"
//importing the text from normalize.css file
import normalize from "normalize.css"

const App = () => {
  return (
    <>
      <Global
        styles={css`
          ${normalize}
          body {
            background-color: #fafafa;
          }
        `}
      >
        ...Content
      </Global>
    </>
  )
}

5,

//Adding global CSS
import { Global, css } from "@emotion/core"
//importing the text from normalize.css file
import normalize from "normalize.css"

const App = () => {
  return (
    <>
      <Global
        styles={css`
          ${normalize}
          body {
            background-color: #fafafa;
          }
        `}
      >
        ...Content
      </Global>
    </>
  )
}

6. và hơn thế nữa

Đây là tệp cấu hình cho màu sắc và kích thước

const config = {
  primaryColor: "#0d6efd",
  secondaryColor: "#7a7a7a",
  error: "#dc3545",
  warning: "#ffc107",
  success: "#198754",
  info: "#0dcaf0",
  hover: "#008FCB",
  textColor: "black",
  lightColor: "#F9F9F9",
  borderColor: " #DDDDDD",
  borderRadius: "4px",
  borderWidth: "1px",
  border: "1px solid",
  buttonColorPrimary: "#fff",
  buttonColorSecondary: "#fff",
  defaultSpacing: "8px",
  smSpacing: "5px",
  lgSpacing: "16px",
  xlSpacing: "24px",
  defaultFontsize: "16px",
  smFontsize: "13px",
  lgFontsize: "18px",
  xlFontsize: "22px",
  transaprantBackground: "transparent",
}
export const tokens = {
  colors: {
    primary: `${config.primaryColor}`,
    hover: `${config.hover}`,
    error: `${config.error}`,
    info: `${config.info}`,
    success: `${config.success}`,
    warning: `${config.warning}`,
    secondary: `${config.secondaryColor}`,
    borderColor: `${config.borderColor}`,
    buttonColorPrimary: `${config.buttonColorPrimary}`,
    buttonColorSecondary: `${config.buttonColorSecondary}`,
    lightColor: `${config.lightColor}`,
    textColor: `${config.textColor}`,
    transaprantBackground: `${config.transaprantBackground}`,
    border: `${config.border}`,
    white: "#ffffff",
    black: "#000000",
  },
  backgroundColor: {
    default: "black",
    light: "lightblue",
    dark: "darkblue",
  },
  font: {
    fontSize: {
      default: `${config.defaultFontsize}`,
      sm: `${config.smFontsize}`,
      lg: `${config.lgFontsize}`,
      xl: `${config.xlFontsize}`,
    },
    fontWeight: {
      normal: "400",
      bold: "700",
      extrabold: "900",
    },
    fontFamily: {
      sans: ['"source sans pro"', "helvetica", "arial", "sans-serif"],
      mono: ['"source code pro"', "monospace"],
    },
  },
  spacing: {
    default: `${config.defaultSpacing}`,
    sm: `${config.smSpacing}`,
    lg: `${config.lgSpacing}`,
    xl: `${config.xlSpacing}`,
  },
  position: {
    static: "static",
    relative: "relative",
    absolute: "absolute",
    fixed: "fixed",
    sticky: "sticky",
  },
  positionValue: {
    top: "",
    bottom: "",
    left: "",
    right: "",
  },

  borderRadius: {
    none: "0",
    default: `${config.borderRadius}`,
    md: "4px",
    lg: "15px",
    round: "50%",
  },
  maxWidths: {
    small: "544px",
    medium: "768px",
    large: "1012px",
    xlarge: "1280px",
  },
  letterSpacing: {
    normal: "0",
    wide: "0.2px",
  },
  lineHeight: {
    none: "1",
    normal: "1.5",
    tight: "1.25",
    loose: "2",
  },
  listStyleType: {
    none: "none",
    disc: "disc",
    decimal: "decimal",
  },
  size: {
    large: "large",
    medium: "medium",
    small: "small",
  },
}

Thành phần

import React from "react"
import { tokens } from "./Tokens"
import styled from "@emotion/styled"
import { css } from "@emotion/react"

const EmotionButton = styled.button`
  border-radius: ${tokens.borderRadius.default};
  background-color: ${tokens.colors.primary};
  color: ${props =>
    props.secondary
      ? tokens.colors.buttonColorSecondary
      : tokens.colors.buttonColorPrimary};
  padding: ${tokens.spacing.default} ${tokens.spacing.lg};
  font-size: ${props => {
    if (props.big) return "20px"
    return `${tokens.font.fontSize.default}`
  }};
  display: ${props => (props.block === "block" ? "block" : "")};
  width: ${props => (props.block === "block" ? "100%" : "")};
  &:hover {
    box-shadow: inset 0 0 0 100em rgb(0 0 0 / 10%);
  }
  outline: none;
  border: none;
  cursor: pointer;
  ${props => {
    return (
      props.disabled &&
      css`
        :disabled {
          opacity: 0.4;
          pointer-events: none;
        }
      `
    )
  }}

  ${props => {
    return (
      props.rounded &&
      css`
        border-radius: ${props.rounded + "px"};
      `
    )
  }}
  ${props => {
    return (
      props.size === "small" &&
      css`
        padding: ${tokens.spacing.sm};
        font-size: ${tokens.font.fontSize.sm};
      `
    )
  }}
  ${props => {
    return (
      props.size === "medium" &&
      css`
        padding: ${tokens.spacing.lg};
        font-size: ${tokens.font.fontSize.lg};
      `
    )
  }}
  ${props => {
    return (
      props.size === "large" &&
      css`
        padding: ${tokens.spacing.xl};
        font-size: ${tokens.font.fontSize.xl};
      `
    )
  }}
  ${props => {
    return (
      props.size &&
      css`
        padding: ${props.size / 2 + "px"} ${props.size + "px"};
        font-size: ${props.size + "px"};
      `
    )
  }}

${props => {
    return (
      props.accent === "secondary" &&
      css`
        background: ${tokens.colors.secondary};
        color: ${tokens.colors.buttonColorSecondary};
      `
    )
  }};
  ${props => {
    return (
      props.accent === "primary" &&
      css`
        background: ${tokens.colors.primary};
        color: #fff;
      `
    )
  }};
  ${props => {
    return (
      props.accent === "warning" &&
      css`
        background: ${tokens.colors.warning};
        color: #fff;
      `
    )
  }};
  ${props => {
    return (
      props.accent === "success" &&
      css`
        background: ${tokens.colors.success};
        color: #fff;
      `
    )
  }};
  ${props => {
    return (
      props.accent === "info" &&
      css`
        background: ${tokens.colors.info};
        color: #fff;
      `
    )
  }};
  ${props => {
    return (
      props.accent === "error" &&
      css`
        background: ${tokens.colors.error};
        color: #fff;
      `
    )
  }};
  ${props => {
    return (
      props.type === "light" &&
      css`
        color: ${props.color ? props.color : "#fff"};
        border: 1px solid ${props.color
            ? props.color
            : tokens.colors.primary && props.accent === "secondary"
            ? tokens.colors.secondary
            : tokens.colors.primary && props.accent === "error"
            ? tokens.colors.error
            : tokens.colors.primary && props.accent === "info"
            ? tokens.colors.info
            : tokens.colors.primary && props.accent === "warning"
            ? tokens.colors.warning
            : tokens.colors.primary && props.accent === "success"
            ? tokens.colors.success
            : tokens.colors.primary};
      `
    )
  }};
  ${props => {
    return (
      props.type === "ghost" &&
      css`
        background: ${tokens.colors.transaprantBackground};
        color: ${props.color
          ? props.color
          : tokens.colors.primary && props.accent === "secondary"
          ? tokens.colors.secondary
          : tokens.colors.primary && props.accent === "error"
          ? tokens.colors.error
          : tokens.colors.primary && props.accent === "info"
          ? tokens.colors.info
          : tokens.colors.primary && props.accent === "warning"
          ? tokens.colors.warning
          : tokens.colors.primary && props.accent === "success"
          ? tokens.colors.success
          : tokens.colors.primary};
        border: none;
      `
    )
  }};
  ${props => {
    return (
      props.type === "hallow" &&
      css`
        background: ${tokens.colors.transaprantBackground};
        color: ${props.color
          ? props.color
          : tokens.colors.primary && props.accent === "secondary"
          ? tokens.colors.secondary
          : tokens.colors.primary && props.accent === "error"
          ? tokens.colors.error
          : tokens.colors.primary && props.accent === "info"
          ? tokens.colors.info
          : tokens.colors.primary && props.accent === "warning"
          ? tokens.colors.warning
          : tokens.colors.primary && props.accent === "success"
          ? tokens.colors.success
          : tokens.colors.primary};
        border: 1px solid ${props.color
            ? props.color
            : tokens.colors.primary && props.accent === "secondary"
            ? tokens.colors.secondary
            : tokens.colors.primary && props.accent === "error"
            ? tokens.colors.error
            : tokens.colors.primary && props.accent === "info"
            ? tokens.colors.info
            : tokens.colors.primary && props.accent === "warning"
            ? tokens.colors.warning
            : tokens.colors.primary && props.accent === "success"
            ? tokens.colors.success
            : tokens.colors.primary};
      `
    )
  }}
`

const Button = ({ ...props }) => {
  return (
    <EmotionButton
      {...props}
      style={{ ...props }}
      onClick={e => props.onClick(e)}
    >
      {props.label}
    </EmotionButton>
  )
}

export default Button

Cách sử dụng

Đây là cách bạn sẽ sử dụng thành phần nút

import Button from "./Button"

function App() {
  return (
    <>
      <div className="app">
        <Button label="Rounded" rounded="50" accent="primary" />

        <Button label="Primary" type="hallow" accent="primary" />

        <Button label="Secondary" accent="secondary" />

        <Button label="ghost" accent="secondary" type="ghost" />

        <Button label="Error" size="large" accent="error" />

        <Button label="Info" accent="info" />

        <Button label="Warning" accent="warning" />

        <Button label="Success" accent="success" />

        <Button label="Block" block="block" accent="warning" />
      </div>
    </>
  )
}

export default App

Kết quả

Phần kết luận

Đây là cách bạn có thể viết css trong js và tạo các thành phần có thể tái sử dụng với cảm xúc css và cách chuyển đạo cụ và dựa trên đạo cụ, bạn có thể thay đổi kiểu dáng của mình

Có rất nhiều tính năng và khái niệm trong cảm xúc, bạn có thể tạo các trình bao bọc img và div, trình bao bọc phần. nếu bạn đi bên dưới liên kết được cung cấp, bạn sẽ biết thêm về nó

Tại sao tôi nên sử dụng CSS cảm xúc?

Tại sao nên sử dụng Cảm xúc để viết CSS? . Ưu điểm lớn nhất của Emotion là các kiểu đối tượng được xử lý dễ dàng để viết CSS. Emotion is more developer-friendly than other libraries. The biggest advantage of Emotion is its easily handled object styles for writing CSS.

CSS cảm xúc là gì?

Emotion là thư viện được thiết kế để viết các kiểu css bằng JavaScript . Nó cung cấp thành phần phong cách mạnh mẽ và có thể dự đoán được bên cạnh trải nghiệm tuyệt vời dành cho nhà phát triển với các tính năng như bản đồ nguồn, nhãn và tiện ích thử nghiệm. Cả hai kiểu chuỗi và đối tượng đều được hỗ trợ.

Cốt lõi cảm xúc là gì?

Những cảm xúc cốt lõi là buồn bã, sợ hãi, tức giận, vui sướng, phấn khích, hưng phấn tình dục và ghê tởm . Về mặt tiến hóa, chúng ta đã phát triển những cảm xúc này để có thể phản ứng với môi trường nhanh hơn khả năng tư duy của bộ não. Một cảm xúc cốt lõi được thiết lập trong hệ thống viền, ở giữa não.

programming css