Catalog Captureと次を使用してグラデーション境界BlogPostcardを作成する方法.js
16156 ワード
こんにちは皆さん、私はあなた全員がよくそうであることを望みます.
このブログのポストは、私が見せた小さなチュートリアルです.どのようにTradiwind CSSを使用してグラデーション境界ブログのポストカードを作成することができます.
私はあなたがTarwind CSSとNextに関する基本的な知識を持っていると仮定します.js
このプロジェクトのために、私は次に選びました.フレームワークとしてのフレームワークとして、この1つのコマンドを使用すると、次のアプリケーションを初期化することができます.
npx create-next-app -e with-tailwindcss my-project
cd my-project
プロジェクトを開き、インデックスを開きます.ページディレクトリ内のJSファイル.
import Head from "next/head";
export default function Home() {
return (
<div>
<Head>
<title>Blog PostCard Tutorial</title>
<link rel="./favicon.ico" />
</Head>
</div>
);
}
const BlogPostCard = () => {
return (
<div className="">
{/* Gradient background of same width & height as Blog post card */}
<div className="">
<div className="">
<div className="">
{/* PostImage */}
<img src="/postImage.png" className="" />
{/* Post title */}
<h1 className="">
This is first title.
</h1>
{/* Post Data/excerpt */}
<p className=" ">
Everything I Know About Style Guides, Design Systems, and
Component Libraries
</p>
</div>
{/* Author image with data */}
<div className="">
<span>
<img
src="/author.jpg"
className=" "
/>
</span>
<p className="">
16 Nov, 2021
</p>
</div>
</div>
</div>
</div>
);
};
export default BlogPostCard;
今、基本的なHTML構造は準備ができています、そして、現在、それは風変わりなCSSクラスを加える時間です.
そこで、ここではすべてのCSSコードを一度に貼っています.
const BlogPostCard = () => {
return (
<div className="relative flex w-1/4 h-[500px] mx-auto mt-10">
{/* Gradient background of same width & height as Blog post card */}
<div className=" rounded-xl w-full bg-gradient-to-r p-[5px] from-[#7928ca] to-[#ff0080]">
<div className="flex flex-col justify-between h-full bg-black rounded-lg p-4">
<div className="flex flex-col justify-center text-white">
{/* PostImage */}
<img src="/postImage.png" className="h-52 mb-5 rounded-lg" />
{/* Post title */}
<h1 className="text-3xl font-extrabold mb-4">
This is first title.
</h1>
{/* Post Data/excerpt */}
<p className="text-lg md:text-lg font-medium mb-6 ">
Everything I Know About Style Guides, Design Systems, and
Component Libraries
</p>
</div>
{/* Author image with data */}
<div className=" flex w-full justify-between mb-4">
<span>
<img
src="/author.jpg"
className="w-[75px] h-[80px] rounded-full "
/>
</span>
<p className="text-lg mr-5 font-semibold text-white flex items-center justify-center">
16 Nov, 2021
</p>
</div>
</div>
</div>
</div>
);
};
export default BlogPostCard;
コンポーネント.インデックスのJS.jsファイルとhome ()関数のコンポーネントです.
import Head from "next/head";
import BlogPostCard from "../components/BlogPostCard";
export default function Home() {
return (
<div className="bg-black flex flex-col min-h-screen py-2">
<Head>
<title>Blog PostCard Tutorial</title>
<link rel="./favicon.ico" />
</Head>
<h1 className="text-8xl font-bold text-indigo-500 mb-10 text-center">Blog PostCard Tutorial</h1>
<div>
<BlogPostCard />
</div>
</div>
);
}
グラデーションボーダーを作成するためのトリックは、2つのdivの1つを作成し、別の入れ子に入れ子にし、互いに相対的である必要があります.
<div>
<div>
</div>
<div>
<div className="rounded-xl w-52 h-64 mx-auto mt-10 bg-gradient-to-r p-[6px] from-[#6EE7B7] via-[#3B82F6] to-[#9333EA]">
<div className="flex flex-col justify-between h-full bg-white text-white rounded-lg p-4">
</div>
</div>
次に、下のdivが上側の分割のグラデーション境界線のように見えることがわかります.
これは私が初めてブログ投稿チュートリアルを作成した場合、私は間違いをした場合plzは私にそれを改善する方法についてのフィードバックを与える.
私はあなたがこのプロジェクトを構築することを楽しみ、このブログを読んであなたの時間を投資していただきありがとうございます.あなたがポストを読んで楽しむか、プロジェクトを構築するのを楽しんでいるならば、あなたの愛を示すために躊躇しないでください、そして、NextjsDev.com(私の個人的なブログWebisteはNext.js、Trewind CSS、React.jsとVsCodeに関連した記事/ポストを読むために)をします.
Reference
この問題について(Catalog Captureと次を使用してグラデーション境界BlogPostcardを作成する方法.js), 我々は、より多くの情報をここで見つけました https://dev.to/raivikas/how-to-create-a-gradient-border-blogpostcard-using-tailwind-css-and-nextjs-57faテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol