본문 바로가기

전체 글380

슈퍼 사이얀 CSS 아트! 드래곤볼 세계의 또 다른 CSS 예술입니다. 이건 소개가 필요 없을 것 같아요. 아니요, 위의 내용은 이미지가 아니라 많은 CSS입니다! 나는 또한 나의 최고의 CSS 전용 미술을 위한 웹사이트를 공개했습니다. 제가 트위터에 공유했으니 언제든지 좋아요와 리트윗을 주세요. 아직 나를 팔로우하지 않았다면 할 시간이야 그렇지 않으면 좋은 내용을 많이 놓칠 거야. 더 미친 CSS 예술을 위해 채널 고정하세요! GIF 2022. 2. 22.
React에서 CSS를 코딩하는 3가지 방법 리액트에 익숙해지는 것은 곰이 될 수 있다. 일단 편안해지면... 안타깝게도 구성요소에 선형 스타일링을 제공하는 방법을 알고 있다는 보장은 없습니다. CSS는 리액트에서 복잡한 프로세스가 될 수 있다. 1. 스타일시트 리액트에서 CSS를 구현하는 가장 눈에 띄는 방법은 .css 스타일시트이다. 탐색이 가장 쉽지만, 특히 CSS에 익숙한 경우 대규모 응용 프로그램에서 상당히 빠르게 복잡해질 수 있으며 탐색 및 참조가 어려울 수 있습니다. .css 스타일시트의 또 다른 잠재적인 단점은 부트스트랩/시맨틱 UI에 대해 매우 특정한 문제에서 상호 작용한다는 것이며, CSS가 기본값을 재정의하도록 하는 것은 당신이 더 구체적이 되도록 하는 것을 요구하거나, 또는 항상 최선의 방법은 아닌 !중요한 를 사용하는 것을 .. 2022. 2. 22.
CSS를 사용하여 관리자 전용 링크를 표시하는 방법 직원/관리자는 애플리케이션 주변에 "관리자 전용" 링크를 뿌리는 것이 매우 편리합니다. 항상 직원/관리자이므로 직원 전용 링크와 일반 링크를 어떻게 구별합니까? 고객에게 "사망한" 관리자 전용 링크가 노출되지 않도록 하려면 어떻게 해야 합니까? 관리자 전용 링크에 작은 SVG 아이콘으로 주석을 달아 이 링크가 직원/관리자 전용 링크임을 나타냅니다. 이것은 클래스 관리자 전용으로 된 일반적인 링크입니다. Internal docs 이것은 Magic ::after pseudo-element와 컨텐츠 속성을 사용하기 위한 작은 CSS 조각으로 구현된다. a.admin-only { position: relative; } a.admin-only::after { position: absolute; top: -2px;.. 2022. 2. 22.
상위 5개의 Javascript 아이콘 라이브러리 비디오 버전 : 거의 모든 웹사이트와 앱은 정보를 표시하거나 어떤 종류의 행동을 기소하기 위해 아이콘을 사용한다. 아이콘을 활용하지 않고 웹 사이트/앱을 구축하는 것은 상상하기 어렵습니다. 이 기사에서는 프로젝트를 구축하는 동안 활용할 수 있는 상위 5개의 JavaScript 아이콘 라이브러리를 여러분과 공유하고 있습니다. 상위 10개 또는 상위 20개 라이브러리를 다루는 다른 기사도 많지만, 너무 많은 옵션을 제공하여 혼동하지 않고 상위 5개 라이브러리를 공유하기로 결정했습니다 이 5개의 도서관은 아마도 최고의 도서관일 것입니다. 그리고 저는 개인적으로 이 도서관을 제 프로젝트에 사용해 왔습니다. 1) 페더리콘 페더리콘은 단순히 아름다운 오픈 소스 아이콘들의 모음입니다. 각 아이콘은 단순성, 일관성 및.. 2022. 2. 19.
Letterize.js 애니메이션 2022. 2. 19.
NativeScript 시작하기 네이티브스크립트(NativeScript)는 네이티브 iOS와 안드로이드 앱을 개발하기 위한 자유-오픈 소스 프레임워크이다. 이것은 JIT로 컴파일된 프레임워크입니다. JS 가상 시스템은 NativeScript 프로그램을 실행하는 데 사용됩니다. 안드로이드와 iOS 기기에서 구동되며 V8 엔진 런타임을 사용한다. 네이티브스크립트는 XML, JS, CSS로 빌드된다. 플레이그라운드는 웹 기반 통합 개발 환경입니다. 이 PlayGround는 간단한 작업 인터페이스, 빠른 프로젝트 관리, 핫 재로딩, 장치 디버깅을 제공합니다. NativeScript를 사용하면 개발자가 개발, 테스트 및 교육 비용을 절감하면서 쉽고 빠르게 교차 플랫폼 프로그램을 구성할 수 있습니다. 그 결과, 네이티브 애플리케이션은 향후 몇 년.. 2022. 2. 19.
개발자로서 디자인에 대한 당신의 생각 좋든 나쁘든 개발자는 종종 디자인 결정을 내립니다. 이는 혼자 작업하는 사이드 프로젝트, (매우 바쁜) 디자이너 한 명만 근무하는 신생 기업, 또는 디자인 팀에서 제공한 와이어프레임에 지정되지 않은 것들을 채우는 작업 중에 발생할 수 있습니다. 디자이너가 개발자(개발자 주창자)로 변신하면서 디자인과 개발의 간극을 메우는 것이 제 목표 중 하나였습니다. 저는 최근에 그것에 대해 많이 쓰고 말했고, 그것을 위해 다음과 같이 말하고 있습니다. 개발자인 당신이 디자인 문제로 고민하는 분야가 궁금합니다. 이것은 매우 구체적일 수도 있고 ("UI에 맞는 글꼴을 고르는 데 어려움이 있다", "색상 구성표는 나를 정말 혼란스럽게 한다."), 좀 더 광범위할 수도 있다. ("디자인 과정 중에 무슨 일이 일어나는가?", .. 2022. 2. 19.
웹 사이트에 대한 사용자 지정 커서 만들기 안녕! 이 빠른 튜토리얼에서는 이미지와 몇 줄의 CSS 코드를 사용하여 사용자 지정 커서를 만드는 방법을 보여 드리겠습니다. 스크린샷: 커서: 커스터마이즈된 커서 이미지가 하나 이상 필요합니다. 브라우저가 지원하는 형식의 이미지를 문자 그대로 사용할 수 있습니다. 예를 들어, 저는 SVG 형식을 사용해 왔습니다. 세 가지 이미지가 있어요 default.svg 포인터.svg text.svg 이러한 상태는 다음 상태를 대체합니다. 체납 포인터. 본문 HTML 코드: 이 예에서는 사용자 지정 커서를 사용할 세 가지 위치를 선택했습니다. 본문: 제목: 단추: HTML 코드에서 다음을 추가할 수 있습니다. CSS Custom Cursor Demo Custom Button NB: 태그 안에 있는 텍스트는 문자 그대.. 2022. 2. 19.
Target#5 CSS 전투 안녕 얘들아, 저는 CSSBattle Series로 돌아왔습니다! 이 기사는 CSSBattle의 Target #5 "Acid Rain"에 대한 것입니다. 지금까지 제가 할 수 있는 최선의 방법은 아래와 같습니다. body{margin:74 20;background:#0B2429; display:flex} p{ width:120;height:120; background:#998235; border-radius:50% 0 50% 50} #a,#b{ background:#F3AC3C; transform:translate(60px,60px)} #b{ transform:translate(-60px,-60px) rotate(180deg);z-index:-1 이것은 267자로 응축된 나의 최단 용액이었다. 같은 방법.. 2022. 2. 19.
이 작은 SVG 트릭으로 다음 웹 애플리케이션을 과급하세요. 도입 제 웹사이트의 배경 SVG를 설정하는 과정에서 문제가 생겼습니다. 배경 SVG는 방대합니다. 80줄의 코드를 말하고 있습니다. 그리고 HTML 파일에 추가하고 싶다면 두 가지 옵션이 있습니다. 전체 SVG 파일의 내용을 붙여넣거나 SVG 파일을 태그에 링크합니다. 80여 개의 줄을 모두 추가하면 HTML 파일이 막혀서 SVG 파일을 태그로 링크했습니다. 하지만 또 다른 문제가 발생했다. SVG 파일에 있는 태그 중 하나를 사용하여 CSS를 사용하여 애니메이션을 만들고 싶었지만, 그 이후로는 사용할 수 없었습니다. path { }; // or #pathID { }; 효과가 없을 것이다. SVG 파일 자체에 CSS만 기재하면 된다는 것을 이때 깨달았습니다. 이를 통해 이미 큰 HTML 마크업에 80줄 .. 2022. 2. 19.
14 코데펜이 당신을 날려버립니다! CSS나 Javascript 코드를 발견하여 우아함과 기능성을 놀라워한 적이 있습니까? 아니야? 모든 일에는 처음이 있기 마련이죠. 또한 이러한 코드펜 중 일부는 웹 디자이너 및 웹 개발자를 위한 우수한 학습 자료입니다. 순수 CSS로 꽃피우기 순수 CSS로 만든 3D 게임방 순수 CSS 대화형 3D 스톱워치 뉴턴의 전구 장전 장치 3D 등각 색상 선택기 네온하트 애니메이션 자폭 버튼 기울어지는 미로 게임 간단한 체스 AI 순수 CSS를 사용한 벽면 계단 홀로그램 포켓몬 카드 순수 CSS에서 페이지 효과 전환 순수 CSS의 이중 나선 워들 게임 여기까지가 편찬입니다. 맛있게 드셨길 바랍니다! 2022. 2. 19.
5 gratuitos 파라 프라티카 CSS 올라, 페소알 파라오 포스트 데 호예, eu separei 5 jogos gratuitos para praticar CSS. Por qui vocé vai encontrar guias so Flexbox, 그리드, Selletores no CSS, e tudo iso induanto se jogando. 1. 플렉스박스 개구리 네세이로 조고 프리시사라 레바르 오스 사핀호스 아오스 세우스 데스티노. 콘타라콤은 24 페이즈 e 3 니베이스 드 디피쿨다드, 케 바이 데 오 이니시안테 콤 소브레 카다 두 플렉스박스, 아티 오 익스피리언테 퀘 상 상 니베이스 세미 디카. 클리칸도 아키요 2. CSS 다이너 Nosso segundo jogo é sobre os seletor. O CSS Diner é compost.. 2022. 2. 19.
HTML 및 CSS를 사용한 Glassmorphism 로그인 양식 친구들아, 오늘은 이 블로그에서 HTML과 CSS를 사용하여 글라스모피즘 로그인 양식을 만드는 방법을 볼 거야. 지난 블로그에서 HTML과 CSS를 사용하여 멋진 로그인 양식을 만드는 방법을 살펴보았습니다. 이제 HTML과 CSS를 사용하여 glassmorphism 로그인 양식을 만들 차례입니다. HTML, CSS, Javascript 관련 프로젝트도 많이 공유했습니다. 여기 있는 이것들 확인하는 거 잊지 마세요. 글라스모피즘 로그인 폼은 현재 이 아름다움으로 많은 인기를 얻고 있습니다. CSS Glassmorphism은 기본적으로 투명한 디자인과 같은 UI 디자인입니다. 다만 이 경우 배경이 반투명하고 약간 흐릿하다. 이러한 유형의 디자인을 사용하는 다양한 유형의 웹 사이트와 응용 프로그램을 볼 수 있.. 2022. 2. 19.
애니메이션 테이블 예약 상호 작용(React/GSAP) 2022. 2. 19.
HTML CSS 및 JavaScript를 사용한 응답형 개인 포트폴리오 웹 사이트 동영상에 대한 설명에서 링크된 t로부터 템플릿을 얻을 수 있습니다. 사용된 기술:- HTML CSS 자바스크립트 사용된 라이브러리 및 자산:- 폰타워썸 스크롤 표시 이 템플릿을 만드는 방법에 대해 알아보려면 전체 비디오를 보십시오. 동영상 설명에 나와 있는 링크에서 무료로 템플릿을 받을 수 있습니다. 영상도 많이 봐주시고 구독도 많이 해주세요. 이렇게 더 많은 콘텐츠를 만들 수 있도록 도와주고 동기부여를 해줍니다. 2022. 2. 19.

티스토리툴바