Mark  RG

Mark RG

1623385320

Background Images Tailwind | Tailwind CSS Tutorial | Tailwind Tutorial | Learn Tailwind 2 CSS

This video will learn you how to set background images in Tailwind. In pure CSS, it is easy to adjust the background repeat, background size, background position. In Tailwind, it’s also easy, but adding the background image is a bit different. Besides that, we’re going to add a Parallax scrolling effect with one class!

Timestamps
00:00 Introduction
02:49 Background repeat
03:57 Background size
04:56 Background position
06:15 Parallax scrolling

Subscribe: https://www.youtube.com/channel/UCkzGZ6ECGCBh0WK9bVUprtw/featured

#tailwind

What is GEEK

Buddha Community

Background Images Tailwind | Tailwind CSS Tutorial | Tailwind Tutorial | Learn Tailwind 2 CSS
최 호민

최 호민

1642390128

파이썬 코딩 무료 강의 - 이미지 처리, 얼굴 인식을 통한 캐릭터 씌우기를 해보아요

파이썬 코딩 무료 강의 (활용편6) - 이미지 처리, 얼굴 인식을 통한 캐릭터 씌우기를 해보아요

파이썬 무료 강의 (활용편6 - 이미지 처리)입니다.
OpenCV 를 이용한 다양한 이미지 처리 기법과 재미있는 프로젝트를 진행합니다.
누구나 볼 수 있도록 쉽고 재미있게 제작하였습니다. ^^

[소개]
(0:00:00) 0.Intro
(0:00:31) 1.소개
(0:02:18) 2.활용편 6 이미지 처리 소개

[OpenCV 전반전]
(0:04:36) 3.환경설정
(0:08:41) 4.이미지 출력
(0:21:51) 5.동영상 출력 #1 파일
(0:29:58) 6.동영상 출력 #2 카메라
(0:34:23) 7.도형 그리기 #1 빈 스케치북
(0:39:49) 8.도형 그리기 #2 영역 색칠
(0:42:26) 9.도형 그리기 #3 직선
(0:51:23) 10.도형 그리기 #4 원
(0:55:09) 11.도형 그리기 #5 사각형
(0:58:32) 12.도형 그리기 #6 다각형
(1:09:23) 13.텍스트 #1 기본
(1:17:45) 14.텍스트 #2 한글 우회
(1:24:14) 15.파일 저장 #1 이미지
(1:29:27) 16.파일 저장 #2 동영상
(1:39:29) 17.크기 조정
(1:50:16) 18.이미지 자르기
(1:57:03) 19.이미지 대칭
(2:01:46) 20.이미지 회전
(2:06:07) 21.이미지 변형 - 흑백
(2:11:25) 22.이미지 변형 - 흐림
(2:18:03) 23.이미지 변형 - 원근 #1
(2:27:45) 24.이미지 변형 - 원근 #2

[반자동 문서 스캐너 프로젝트]
(2:32:50) 25.미니 프로젝트 1 - #1 마우스 이벤트 등록
(2:42:06) 26.미니 프로젝트 1 - #2 기본 코드 완성
(2:49:54) 27.미니 프로젝트 1 - #3 지점 선 긋기
(2:55:24) 28.미니 프로젝트 1 - #4 실시간 선 긋기

[OpenCV 후반전]
(3:01:52) 29.이미지 변형 - 이진화 #1 Trackbar
(3:14:37) 30.이미지 변형 - 이진화 #2 임계값
(3:20:26) 31.이미지 변형 - 이진화 #3 Adaptive Threshold
(3:28:34) 32.이미지 변형 - 이진화 #4 오츠 알고리즘
(3:32:22) 33.이미지 변환 - 팽창
(3:41:10) 34.이미지 변환 - 침식
(3:45:56) 35.이미지 변환 - 열림 & 닫힘
(3:54:10) 36.이미지 검출 - 경계선
(4:05:08) 37.이미지 검출 - 윤곽선 #1 기본
(4:15:26) 38.이미지 검출 - 윤곽선 #2 찾기 모드
(4:20:46) 39.이미지 검출 - 윤곽선 #3 면적

[카드 검출 & 분류기 프로젝트]
(4:27:42) 40.미니프로젝트 2

[퀴즈]
(4:31:57) 41.퀴즈

[얼굴인식 프로젝트]
(4:41:25) 42.환경설정 및 기본 코드 정리
(4:54:48) 43.눈과 코 인식하여 도형 그리기
(5:10:42) 44.그림판 이미지 씌우기
(5:20:52) 45.캐릭터 이미지 씌우기
(5:33:10) 46.보충설명
(5:40:53) 47.마치며 (학습 참고 자료)
(5:42:18) 48.Outro


[학습자료]
수업에 필요한 이미지, 동영상 자료 링크입니다.

고양이 이미지 : https://pixabay.com/images/id-2083492/ 
크기 : 640 x 390  
파일명 : img.jpg

고양이 동영상 : https://www.pexels.com/video/7515833/ 
크기 : SD (360 x 640)  
파일명 : video.mp4

신문 이미지 : https://pixabay.com/images/id-350376/ 
크기 : 1280 x 853  
파일명 : newspaper.jpg

카드 이미지 1 : https://pixabay.com/images/id-682332/ 
크기 : 1280 x 1019  
파일명 : poker.jpg

책 이미지 : https://www.pexels.com/photo/1029807/ 
크기 : Small (640 x 853)  
파일명 : book.jpg

눈사람 이미지 : https://pixabay.com/images/id-1300089/ 
크기 : 1280 x 904  
파일명 : snowman.png

카드 이미지 2 : https://pixabay.com/images/id-161404/ 
크기 : 640 x 408  
파일명 : card.png

퀴즈용 동영상 : https://www.pexels.com/video/3121459/ 
크기 : HD (1280 x 720)  
파일명 : city.mp4

프로젝트용 동영상 : https://www.pexels.com/video/3256542/ 
크기 : Full HD (1920 x 1080)  
파일명 : face_video.mp4

프로젝트용 캐릭터 이미지 : https://www.freepik.com/free-vector/cute-animal-masks-video-chat-application-effect-filters-set_6380101.htm  
파일명 : right_eye.png (100 x 100), left_eye.png (100 x 100), nose.png (300 x 100)

무료 이미지 편집 도구 : https://pixlr.com/kr/
(Pixlr E -Advanced Editor)

#python #opencv 

Tailwind CSS tutorial

In this tutorial I would like to introduce you to one of the fastest growing and promising CSS Frameworks at the moment, Tailwind CSS. It is different from other frameworks, such as Bootstrap, because it is built on a new way of building user interfaces using a utility-first CSS classes structure, as opposed to the OOCSS structure from other frameworks.

By the end of this guide you will be able to install, configure and build a responsive hero section (live demo) using the utility-first classes from Tailwind CSS and configure the project using the recommended PostCSS powered Tailwind configuration file for better maintainability and versatility.

Here’s the table of contents for this tutorial for Tailwind CSS:

  • Introducing Tailwind CSS
  • Adding Tailwind CSS to your project via a package manager
  • Creating the configuration file and process your CSS with Tailwind
  • Building a responsive hero section using the utility-first classes from Tailwind
  • Customize fonts, colors and add extra classes using the configuration file
  • Reduce loading time and file size by purging the unused classes from your CSS
  • Conclusion and summary

Read the full tutorial from Themesberg.

#tailwind #tailwind-css #tailwind-css-tutorial #tutorial #open-source

CSS FlexBox Cheat Sheets for Web Developers in 2021

It’s 2021! Let’s refresh Our CSS Flexbox  Memory. Here’s a Cheat Sheet of everything you can do with CSS flexbox to get started in 2021

#css3 #learn-flexbox-css #flexbox-tutorials #learn-css #web-development #learn-web-development #learning-css

Mark  RG

Mark RG

1623385320

Background Images Tailwind | Tailwind CSS Tutorial | Tailwind Tutorial | Learn Tailwind 2 CSS

This video will learn you how to set background images in Tailwind. In pure CSS, it is easy to adjust the background repeat, background size, background position. In Tailwind, it’s also easy, but adding the background image is a bit different. Besides that, we’re going to add a Parallax scrolling effect with one class!

Timestamps
00:00 Introduction
02:49 Background repeat
03:57 Background size
04:56 Background position
06:15 Parallax scrolling

Subscribe: https://www.youtube.com/channel/UCkzGZ6ECGCBh0WK9bVUprtw/featured

#tailwind

CSS background image tutorial with examples

This article was originally published at: https://www.blog.duomly.com/css-background-image-tutorial-with-examples/


The background image is probably one of the CSS properties which all of us, front-end developers, used at least a few times in our careers. Most people think that there can’t be anything unusual about background-image, but after a quick research, I have a different conclusion.

There are lots of questions askes about CSS background image every day in Facebook groups and lots of unknown tricks which can help us to achieve amazing effects and make stunning apps and websites.

That’s the reason I decided to create this article to show you what magic can be done using such a simple CSS property. I gathered seven tips and tricks I believe will be the most useful and create some code examples where you can check what’s going on there for you.

And, if as usually if you don’t like reading, jump to our Youtube channel for a video version.

Let’s check what’s behind the background!

1. How to fit a background image perfectly to a viewport?

Let’s start from something that’s more tip than a trick. How often it happened to you that you had to struggle with your background image to make in perfectly fitted and not stretched and unattractive?

Let me show you the way how to make your background image always perfectly fitted to your browser window!

2. How to use multiple background images with CSS?

Hm, and what if I’d like to add more then one image in the background?

That’s possible and not very difficult, but can give a nice result while you’ve got an idea to mix two graphics into something beautiful.

I personally think that it’s super useful when we want to add a pattern on the top of a background image, so that’s what I will show you in this example.

Let’s see how it works!

3. How to create a triangular background image?

Another exciting CSS background image trick is a triangular background image. It creates a really beautiful effect, especially when we would like to show some totally different options like day and night, or winter and summer.

It is done by creating two divs, both for the full viewport, then it’s needed to add a background image to both of them, and next, the second div needs a clip-path property to create a triangle shape.

Let’s see the code and result!

4. How to add a gradient overlay to my background image?

The fourth trick I’d like to show you in this article is about overlay on the background image. It can be useful when you would like to put some text on the image, but it’s too light, and text is not visible, but it can also improve the image itself.

For example, sunset images can be strengthened by adding a pink-orange gradient or red to transparent gradient.

Let’s see how we can easily add a gradient overlay to the background image!

5. How to create a color-changing background image animation?

And what if you can decide which color is the best as an overlay for your background image? Then animations on background images are really useful.

Using an animated overlay can give your website a great final effect, and for sure, people will remember it.

Let’s see what we can do using background images and animations in CSS!

6. How to make a grid background image?

Sometimes it’s a great idea to go a little bit more crazy, especially if the project is about art or photography, then a nice background image can be created with CSS grid and CSS background image.

Oh, if you don't know what's CSS grid check it out here.

Let’s take a look!

7. How to set a background image as a text color?

Using background image with background-clip you can achieve a beautiful effect of the background image for text. In some cases, it may be very useful, especially when you’d like to create a big text header, but not as boring as a normal color.

Let’s see the stunning effect we can get!

Conclusion

In this article, you could see 7 different tips and tricks to make amazing things with the background image. I’m pretty sure those hints will be helpful and allow you to get amazing results on your layouts. If you’d like to check out some more interesting CSS tips and tricks, check out our latest CSS borders tips and tricks article and one of the previous CSS tips and tricks.

If you have ever used any customized solution for your background let me know in the comments, I will be happy to find out what more can be done with CSS background image property.

Thank you for reading,

Anna from Duomly

#css #background #background-image #html #coding